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 var extend = function () {36 37 // Variables38 var extended = {};39 var deep = false;40 var i = 0;41 var length = arguments.length;42 43 // Merge the object into the extended object44 var merge = function (obj) {45 for (var prop in obj) {46 if (obj.hasOwnProperty(prop)) {47 extended[prop] = obj[prop];48 }49 }50 };51 52 // Loop through each object and conduct a merge53 for ( ; i < length; i++ ) {54 var obj = arguments[i];55 merge(obj);56 }57 58 return extended;59 60 };61 var Luxy = function(){62 this.Targets = [];63 this.TargetsLength = 0;64 this.wrapper = '';65 this.windowHeight = 0;66 this.wapperOffset = 0;67 };68 Luxy.prototype = {69 isAnimate: false,70 isResize : false,71 scrollId: "",72 resizeId: "",73 init : function(options){74 this.settings = extend(defaults, options || {});75 this.wrapper = document.querySelector(this.settings.wrapper);76 77 if(this.wrapper==="undefined"){78 return false;79 }80 this.targets = document.querySelectorAll(this.settings.targets);81document.body.style.height = this.wrapper.clientHeight + 'px';82 this.windowHeight = window.clientHeight;83 this.attachEvent();84 this.apply(this.targets,this.wrapper);85 this.animate();86 this.resize();87 },88 apply : function(targets,wrapper){89 this.wrapperInit();90 91this.targetsLength = targets.length;92 for (var i = 0; i < this.targetsLength; i++) {93 var attr = {94offset : targets[i].getAttribute('data-offset'),95speedX : targets[i].getAttribute('data-speed-x'),96speedY : targets[i].getAttribute('data-speed-Y'),97percentage : targets[i].getAttribute('data-percentage'),98horizontal : targets[i].getAttribute('data-horizontal')99};100 this.targetsInit(targets[i],attr);101 }102 },103 wrapperInit: function(){104 this.wrapper.style.width = '100%';105 this.wrapper.style.position = 'fixed';106 },107 targetsInit: function(elm,attr){108 109 this.Targets.push({110 elm : elm,111 offset : attr.offset ? attr.offset : 0,112 horizontal : attr.horizontal ? attr.horizontal : 0,113 top : 0,114 left : 0,115 speedX : attr.speedX ? attr.speedX : 1,116 speedY : attr.speedY ? attr.speedY : 1,117 percentage :attr.percentage ? attr.percentage : 0118});119 },120 scroll : function(){121 var scrollTopTmp = document.documentElement.scrollTop || document.body.scrollTop;122 this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;123 var offsetBottom = this.scrollTop + this.windowHeight;124 this.wrapperUpdate(this.scrollTop);125 for (var i = 0; i < this.Targets.length; i++) {126 this.targetsUpdate(this.Targets[i]);127}128},129 animate : function(){130 this.scroll();131 this.scrollId = requestAnimationFrame(this.animate.bind(this));132},133 wrapperUpdate : function(){134 135 this.wapperOffset += (this.scrollTop - this.wapperOffset) * this.settings.wrapperSpeed;136 this.wrapper.style.transform = 'translate3d(' + 0 + ',' + Math.round(-this.wapperOffset* 100) / 100 + 'px ,' + 0 + ')';137},138 targetsUpdate : function(target){139 target.top += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedY) - target.top) * this.settings.targetPercentage;140 target.left += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedX) - target.left) * this.settings.targetPercentage;141 var targetOffsetTop = ( parseInt(target.percentage) - target.top - parseInt(target.offset) );142 var offsetY = Math.round(targetOffsetTop * -100) / 100;143 var offsetX = 0;144 if(target.horizontal){145 var targetOffsetLeft = ( parseInt(target.percentage) - target.left - parseInt(target.offset) );146 offsetX = Math.round(targetOffsetLeft * -100) / 100;147 }148 target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ,' + 0 +')';149 },150 resize: function(){151 var self = this;152 self.windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0);153 if( parseInt(self.wrapper.clientHeight) != parseInt(document.body.style.height)){154 document.body.style.height = self.wrapper.clientHeight + 'px';155 }156 self.resizeId = requestAnimationFrame(self.resize.bind(self));157 },158 attachEvent : function(){159 var self = this;160 window.addEventListener('resize',function(){161 if(!self.isResize){162 cancelAnimationFrame(self.resizeId);163 cancelAnimationFrame(self.scrollId);164 self.isResize = true;165 setTimeout(function(){166 self.isResize = false;167 self.resizeId = requestAnimationFrame(self.resize.bind(self));168 self.scrollId = requestAnimationFrame(self.animate.bind(self));169 },200);170 }171 });172 173 }174 };175 176 177 var luxy = new Luxy();178 179 return luxy;180 })181);182 183 luxy.init();
0 コメント