Guest User

Untitled

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