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