parallax-scroll.js (9301B)
1 jQuery(function() { 2 ParallaxScroll.init(); 3 }); 4 5 var ParallaxScroll = { 6 /* PUBLIC VARIABLES */ 7 showLogs: false, 8 round: 1000, 9 10 /* PUBLIC FUNCTIONS */ 11 init: function() { 12 this._log("init"); 13 if (this._inited) { 14 this._log("Already Inited"); 15 this._inited = true; 16 return; 17 } 18 this._requestAnimationFrame = (function(){ 19 return window.requestAnimationFrame || 20 window.webkitRequestAnimationFrame || 21 window.mozRequestAnimationFrame || 22 window.oRequestAnimationFrame || 23 window.msRequestAnimationFrame || 24 function(/* function */ callback, /* DOMElement */ element){ 25 window.setTimeout(callback, 1000 / 60); 26 }; 27 })(); 28 this._onScroll(true); 29 }, 30 31 /* PRIVATE VARIABLES */ 32 _inited: false, 33 _properties: ['x', 'y', 'z', 'rotateX', 'rotateY', 'rotateZ', 'scaleX', 'scaleY', 'scaleZ', 'scale'], 34 _requestAnimationFrame:null, 35 36 /* PRIVATE FUNCTIONS */ 37 _log: function(message) { 38 if (this.showLogs) console.log("Parallax Scroll / " + message); 39 }, 40 _onScroll: function(noSmooth) { 41 var scroll = jQuery(document).scrollTop(); 42 var windowHeight = jQuery(window).height(); 43 this._log("onScroll " + scroll); 44 jQuery("[data-parallax]").each(jQuery.proxy(function(index, el) { 45 var jQueryel = jQuery(el); 46 var properties = []; 47 var applyProperties = false; 48 var style = jQueryel.data("style"); 49 if (style == undefined) { 50 style = jQueryel.attr("style") || ""; 51 jQueryel.data("style", style); 52 } 53 var datas = [jQueryel.data("parallax")]; 54 var iData; 55 for(iData = 2; ; iData++) { 56 if(jQueryel.data("parallax"+iData)) { 57 datas.push(jQueryel.data("parallax-"+iData)); 58 } 59 else { 60 break; 61 } 62 } 63 var datasLength = datas.length; 64 for(iData = 0; iData < datasLength; iData ++) { 65 var data = datas[iData]; 66 var scrollFrom = data["from-scroll"]; 67 if (scrollFrom == undefined) scrollFrom = Math.max(0, jQuery(el).offset().top - windowHeight); 68 scrollFrom = scrollFrom | 0; 69 var scrollDistance = data["distance"]; 70 var scrollTo = data["to-scroll"]; 71 if (scrollDistance == undefined && scrollTo == undefined) scrollDistance = windowHeight; 72 scrollDistance = Math.max(scrollDistance | 0, 1); 73 var easing = data["easing"]; 74 var easingReturn = data["easing-return"]; 75 if (easing == undefined || !jQuery.easing|| !jQuery.easing[easing]) easing = null; 76 if (easingReturn == undefined || !jQuery.easing|| !jQuery.easing[easingReturn]) easingReturn = easing; 77 if (easing) { 78 var totalTime = data["duration"]; 79 if (totalTime == undefined) totalTime = scrollDistance; 80 totalTime = Math.max(totalTime | 0, 1); 81 var totalTimeReturn = data["duration-return"]; 82 if (totalTimeReturn == undefined) totalTimeReturn = totalTime; 83 scrollDistance = 1; 84 var currentTime = jQueryel.data("current-time"); 85 if(currentTime == undefined) currentTime = 0; 86 } 87 if (scrollTo == undefined) scrollTo = scrollFrom + scrollDistance; 88 scrollTo = scrollTo | 0; 89 var smoothness = data["smoothness"]; 90 if (smoothness == undefined) smoothness = 30; 91 smoothness = smoothness | 0; 92 if (noSmooth || smoothness == 0) smoothness = 1; 93 smoothness = smoothness | 0; 94 var scrollCurrent = scroll; 95 scrollCurrent = Math.max(scrollCurrent, scrollFrom); 96 scrollCurrent = Math.min(scrollCurrent, scrollTo); 97 if(easing) { 98 if(jQueryel.data("sens") == undefined) jQueryel.data("sens", "back"); 99 if(scrollCurrent>scrollFrom) { 100 if(jQueryel.data("sens") == "back") { 101 currentTime = 1; 102 jQueryel.data("sens", "go"); 103 } 104 else { 105 currentTime++; 106 } 107 } 108 if(scrollCurrent<scrollTo) { 109 if(jQueryel.data("sens") == "go") { 110 currentTime = 1; 111 jQueryel.data("sens", "back"); 112 } 113 else { 114 currentTime++; 115 } 116 } 117 if(noSmooth) currentTime = totalTime; 118 jQueryel.data("current-time", currentTime); 119 } 120 this._properties.map(jQuery.proxy(function(prop) { 121 var defaultProp = 0; 122 var to = data[prop]; 123 if (to == undefined) return; 124 if(prop=="scale" || prop=="scaleX" || prop=="scaleY" || prop=="scaleZ" ) { 125 defaultProp = 1; 126 } 127 else { 128 to = to | 0; 129 } 130 var prev = jQueryel.data("_" + prop); 131 if (prev == undefined) prev = defaultProp; 132 var next = ((to-defaultProp) * ((scrollCurrent - scrollFrom) / (scrollTo - scrollFrom))) + defaultProp; 133 var val = prev + (next - prev) / smoothness; 134 if(easing && currentTime>0 && currentTime<=totalTime) { 135 var from = defaultProp; 136 if(jQueryel.data("sens") == "back") { 137 from = to; 138 to = -to; 139 easing = easingReturn; 140 totalTime = totalTimeReturn; 141 } 142 val = jQuery.easing[easing](null, currentTime, from, to, totalTime); 143 } 144 val = Math.ceil(val * this.round) / this.round; 145 if(val==prev&&next==to) val = to; 146 if(!properties[prop]) properties[prop] = 0; 147 properties[prop] += val; 148 if (prev != properties[prop]) { 149 jQueryel.data("_" + prop, properties[prop]); 150 applyProperties = true; 151 } 152 }, this)); 153 } 154 if (applyProperties) { 155 if (properties["z"] != undefined) { 156 var perspective = data["perspective"]; 157 if (perspective == undefined) perspective = 800; 158 var jQueryparent = jQueryel.parent(); 159 if(!jQueryparent.data("style")) jQueryparent.data("style", jQueryparent.attr("style") || ""); 160 jQueryparent.attr("style", "perspective:" + perspective + "px; -webkit-perspective:" + perspective + "px; "+ jQueryparent.data("style")); 161 } 162 if(properties["scaleX"] == undefined) properties["scaleX"] = 1; 163 if(properties["scaleY"] == undefined) properties["scaleY"] = 1; 164 if(properties["scaleZ"] == undefined) properties["scaleZ"] = 1; 165 if (properties["scale"] != undefined) { 166 properties["scaleX"] *= properties["scale"]; 167 properties["scaleY"] *= properties["scale"]; 168 properties["scaleZ"] *= properties["scale"]; 169 } 170 var translate3d = "translate3d(" + (properties["x"] ? properties["x"] : 0) + "px, " + (properties["y"] ? properties["y"] : 0) + "px, " + (properties["z"] ? properties["z"] : 0) + "px)"; 171 var rotate3d = "rotateX(" + (properties["rotateX"] ? properties["rotateX"] : 0) + "deg) rotateY(" + (properties["rotateY"] ? properties["rotateY"] : 0) + "deg) rotateZ(" + (properties["rotateZ"] ? properties["rotateZ"] : 0) + "deg)"; 172 var scale3d = "scaleX(" + properties["scaleX"] + ") scaleY(" + properties["scaleY"] + ") scaleZ(" + properties["scaleZ"] + ")"; 173 var cssTransform = translate3d + " " + rotate3d + " " + scale3d + ";"; 174 this._log(cssTransform); 175 jQueryel.attr("style", "transform:" + cssTransform + " -webkit-transform:" + cssTransform + " " + style); 176 } 177 }, this)); 178 if(window.requestAnimationFrame) { 179 window.requestAnimationFrame(jQuery.proxy(this._onScroll, this, false)); 180 } 181 else { 182 this._requestAnimationFrame(jQuery.proxy(this._onScroll, this, false)); 183 } 184 } 185 };