rellax.min.js

(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.Rellax=factory()}})(this,function(){var Rellax=function(el,options){"use strict";var self=Object.create(Rellax.prototype);var posY=0;var screenY=0;var blocks=[];var pause=false;var loop=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(callback){setTimeout(callback,1e3/60)};self.options={speed:-2,center:false};if(options){Object.keys(options).forEach(function(key){self.options[key]=options[key]})}if(self.options.speed<-10){self.options.speed=-10}else if(self.options.speed>10){self.options.speed=10}if(!el){el=".rellax"}if(document.getElementsByClassName(el.replace(".",""))){self.elems=document.getElementsByClassName(el.replace(".",""))}else if(document.querySelector(el)!==false){self.elems=document.querySelector(el)}else{throw new Error("The elements you're trying to select don't exist.")}var init=function(){screenY=window.innerHeight;setPosition();for(var i=0;i<self.elems.length;i++){var block=createBlock(self.elems[i]);blocks.push(block)}window.addEventListener("resize",function(){animate()});update();animate()};var createBlock=function(el){var posY=el.getAttribute("data-rellax-percentage")||self.options.center?document.body.scrollTop:0;var blockTop=posY+el.getBoundingClientRect().top;var blockHeight=el.clientHeight||el.offsetHeight||el.scrollHeight;var percentage=el.getAttribute("data-rellax-percentage")?el.getAttribute("data-rellax-percentage"):(posY-blockTop+screenY)/(blockHeight+screenY);if(self.options.center){percentage=.5}var speed=el.getAttribute("data-rellax-speed")?limitSpeed(el.getAttribute("data-rellax-speed"),10):self.options.speed;if(el.getAttribute("data-rellax-percentage")||self.options.center){speed=el.getAttribute("data-rellax-speed")?limitSpeed(el.getAttribute("data-rellax-speed"),5):limitSpeed(self.options.speed,5)}var base=updatePosition(percentage,speed);var style=el.style.cssText;var transform="";if(style.indexOf("transform")>=0){var index=style.indexOf("transform");var trimmedStyle=style.slice(index);var delimiter=trimmedStyle.indexOf(";");if(delimiter){transform=" "+trimmedStyle.slice(11,delimiter).replace(/\s/g,"")}else{transform=" "+trimmedStyle.slice(11).replace(/\s/g,"")}}return{base:base,top:blockTop,height:blockHeight,speed:speed,style:style,transform:transform}};var limitSpeed=function(current,max){if(current<-max){return-max}else if(current>max){return max}else{return current}};var setPosition=function(){var oldY=posY;if(window.pageYOffset!==undefined){posY=window.pageYOffset}else{posY=(document.documentElement||document.body.parentNode||document.body).scrollTop}if(oldY!=posY){return true}return false};var updatePosition=function(percentage,speed){var value=speed*(100*(1-percentage));return Math.round(value)};var update=function(){if(setPosition()&&pause===false){animate()}loop(update)};var animate=function(){for(var i=0;i<self.elems.length;i++){var percentage=(posY-blocks[i].top+screenY)/(blocks[i].height+screenY);var position=updatePosition(percentage,blocks[i].speed)-blocks[i].base;var translate=" translate3d(0,"+position+"px"+",0)"+blocks[i].transform;self.elems[i].style.cssText=blocks[i].style+"-webkit-transform:"+translate+";-moz-transform:"+translate+";transform:"+translate+";"}};self.destroy=function(){for(var i=0;i<self.elems.length;i++){self.elems[i].style.cssText=blocks[i].style}pause=true};init();return self};return Rellax});