jquery.parallax-scroll.js 8.7 KB

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