https://www.tensinkai.or.jp/assets/js/luxy.js

1/**
2 * Written by Mineo Okuda on 01/03/18.
3 *
4 * Mineo Okuda - development + design
5 * https://willstyle.co.jp
6 * https://github.com/min30327
7 *
8 * MIT license.
9 */
10
11(function(root, factory) {
12	'use strict';
13
14	if (typeof define === 'function' && define.amd) {
15		// AMD. Register as an anonymous module.
16		define([], factory);
17	}
18	else if (typeof exports === 'object') {
19		// COMMONJS
20		module.exports = factory();
21	}
22	else {
23		// BROWSER
24		root.luxy = factory();
25	}
26}(this, function() {
27
28	'use strict';
29	
30		var defaults = {
31			wrapper: '#luxy',
32			targets : '.luxy-el',
33			wrapperSpeed: 0.08,
34			targetSpeed: 0.02,
35			targetPercentage: 0.1
36		};
37
38 		var requestAnimationFrame = 
39			window.requestAnimationFrame || window.mozRequestAnimationFrame ||
40			window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
41			window.requestAnimationFrame = requestAnimationFrame;
42		var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
43
44		/**
45		 * Merge two or more objects. Returns a new object.
46		 * @param {Object}   objects  The objects to merge together
47		 * @returns {Object}          Merged values of defaults and options
48		 */
49		var extend = function () {
50
51			// Variables
52			var extended = {};
53			var deep = false;
54			var i = 0;
55			var length = arguments.length;
56
57			// Merge the object into the extended object
58			var merge = function (obj) {
59				for (var prop in obj) {
60					if (obj.hasOwnProperty(prop)) {
61						extended[prop] = obj[prop];
62					}
63				}
64			};
65
66			// Loop through each object and conduct a merge
67			for ( ; i < length; i++ ) {
68				var obj = arguments[i];
69				merge(obj);
70			}
71
72			return extended;
73
74		};
75
76		var Luxy = function(){
77			this.Targets = [];
78			this.TargetsLength = 0;
79			this.wrapper = '';
80			this.windowHeight = 0;
81			this.wapperOffset = 0;
82		};
83		Luxy.prototype = {
84			isAnimate: false,
85			isResize : false,
86			scrollId: "",
87			resizeId: "",
88			init : function(options){
89				this.settings = extend(defaults, options || {});
90				this.wrapper = document.querySelector(this.settings.wrapper);
91
92				if(this.wrapper==="undefined"){
93					return false;
94				}
95				this.targets = document.querySelectorAll(this.settings.targets);
96				document.body.style.height = this.wrapper.clientHeight + 'px';
97
98				this.windowHeight = window.clientHeight;
99				this.attachEvent();
100				this.apply(this.targets,this.wrapper);
101				this.animate();
102				this.resize();
103			},
104			apply : function(targets,wrapper){
105				this.wrapperInit();
106				
107				this.targetsLength = targets.length;
108				for (var i = 0; i < this.targetsLength; i++) {
109					var attr = {
110						offset : targets[i].getAttribute('data-offset'),
111						speedX : targets[i].getAttribute('data-speed-x'),
112						speedY : targets[i].getAttribute('data-speed-Y'),
113						percentage : targets[i].getAttribute('data-percentage'),
114						horizontal : targets[i].getAttribute('data-horizontal')
115					};
116					this.targetsInit(targets[i],attr);
117				}
118			},
119			wrapperInit: function(){
120				this.wrapper.style.width = '100%';
121				this.wrapper.style.position = 'fixed';
122			},
123			targetsInit: function(elm,attr){
124				
125				this.Targets.push({
126					elm : elm,
127					offset : attr.offset ? attr.offset : 0,
128					horizontal : attr.horizontal ? attr.horizontal : 0,
129					top : 0,
130					left : 0,
131					speedX : attr.speedX ? attr.speedX : 1,
132					speedY : attr.speedY ? attr.speedY : 1,
133					percentage :attr.percentage ? attr.percentage : 0
134				});
135			},
136			scroll : function(){
137				var scrollTopTmp = document.documentElement.scrollTop || document.body.scrollTop;
138				this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
139				var offsetBottom = this.scrollTop + this.windowHeight;
140				this.wrapperUpdate(this.scrollTop);
141				for (var i = 0; i < this.Targets.length; i++) {
142					this.targetsUpdate(this.Targets[i]);
143				}
144			},
145			animate : function(){
146				this.scroll();
147				this.scrollId = requestAnimationFrame(this.animate.bind(this));
148			},
149			wrapperUpdate : function(){
150				
151				this.wapperOffset += (this.scrollTop - this.wapperOffset) * this.settings.wrapperSpeed;
152				this.wrapper.style.transform = 'translate3d(' + 0 + ',' +  Math.round(-this.wapperOffset* 100) / 100 + 'px ,' + 0 + ')';
153			},
154			targetsUpdate : function(target){
155				target.top += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedY) - target.top) * this.settings.targetPercentage;
156				target.left += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedX) - target.left) * this.settings.targetPercentage;
157				var targetOffsetTop = ( parseInt(target.percentage) - target.top - parseInt(target.offset) );
158				var offsetY = Math.round(targetOffsetTop * -100) / 100;
159				var offsetX = 0;
160				if(target.horizontal){
161					var targetOffsetLeft = ( parseInt(target.percentage) - target.left - parseInt(target.offset) );
162					offsetX = Math.round(targetOffsetLeft * -100) / 100;
163				}
164				target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ,' + 0 +')';
165			},
166			resize: function(){
167				var self = this;
168				self.windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0