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