https://www.northsnowland.com/wp-content/themes/cocoon-child-master/js/luxy.js

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