PageRenderTime 87ms CodeModel.GetById 20ms RepoModel.GetById 0ms app.codeStats 0ms

/js/jquery.rd-parallax.js

https://gitlab.com/pulicapus-joomla/mod_tm_parallax
JavaScript | 301 lines | 238 code | 56 blank | 7 comment | 37 complexity | d136dbbdd16527068548f32ce95df1f3 MD5 | raw file
  1. /*
  2. * Author: Evgeniy Gusarov StMechanus (Diversant)
  3. * Under the MIT License
  4. *
  5. * Version: 2.0.1
  6. *
  7. */
  8. ;
  9. (function ($) {
  10. var RDParallax = function (element, options) {
  11. this.options = options;
  12. this.settings = {
  13. 'imageClass': 'parallax_image',
  14. 'patternClass': 'parallax_pattern',
  15. 'contentClass': 'parallax_cnt',
  16. 'wrapClass': 'parallax'
  17. }
  18. this.$wrap = $(element);
  19. this.$image = $.noop();
  20. };
  21. RDParallax.prototype = {
  22. init: function () {
  23. var parallax = this;
  24. parallax.isInit = true;
  25. parallax.createDOM();
  26. parallax.blur();
  27. parallax.createListeners();
  28. },
  29. createDOM: function () {
  30. var parallax = this;
  31. parallax
  32. .$wrap
  33. .addClass(parallax.settings.wrapClass)
  34. .wrapInner($('<div/>', {
  35. 'class': parallax.settings.contentClass
  36. }))
  37. .prepend($('<div/>', {
  38. 'class': (parallax.options.pattern ? parallax.settings.patternClass : parallax.settings.imageClass)
  39. }).css({
  40. 'background-image': 'url(' + parallax.options.url + ')',
  41. 'background-color': parallax.options.color
  42. }));
  43. parallax.$image = parallax.options.pattern ? parallax.$wrap.find('.' + parallax.settings.patternClass) : parallax.$wrap.find('.' + parallax.settings.imageClass);
  44. },
  45. createListeners: function () {
  46. this.createResizeListener();
  47. this.createScrollListener();
  48. },
  49. createScrollListener: function () {
  50. var parallax = this;
  51. if (parallax.isMobile()) {
  52. if (!parallax.options.mobile) {
  53. return;
  54. }
  55. }
  56. $(window).bind('touchstart', function () {
  57. parallax.isTouched = true;
  58. });
  59. $(window).bind('touchend', function () {
  60. if (parallax.timer) {
  61. clearTimeout(parallax.timer);
  62. }
  63. parallax.timer = setTimeout(function () {
  64. parallax.isTouched = false;
  65. }, 1200);
  66. });
  67. $(window).bind('scroll', function () {
  68. parallax.move();
  69. });
  70. parallax.move();
  71. },
  72. createResizeListener: function () {
  73. var parallax = this;
  74. if (parallax.isMobile()) {
  75. if (!parallax.options.mobile) {
  76. return;
  77. }
  78. }
  79. if (!parallax.isMobile()) {
  80. $(window).bind('resize', function () {
  81. parallax.resize();
  82. });
  83. }
  84. $(window).bind('orientationchange', function () {
  85. setTimeout(function () {
  86. parallax.resize();
  87. }, 300);
  88. });
  89. parallax.resize();
  90. },
  91. move: function () {
  92. var parallax = this;
  93. if (!parallax.isVisible()) {
  94. return;
  95. }
  96. if (parallax.isMobile()) {
  97. if (!parallax.options.mobile) {
  98. return;
  99. }
  100. }
  101. var st = $(window).scrollTop(),
  102. off = parallax.$wrap.offset().top,
  103. wh = $(window).height(),
  104. h = parallax.$wrap.outerHeight(),
  105. ph = parallax.$image.height();
  106. var speed = parallax.options.speed;
  107. if (speed < 0) {
  108. speed = 0;
  109. }
  110. if (speed > 1) {
  111. speed = 1;
  112. }
  113. var step = (st - (off - wh)) / ((off + h) - (off - wh)) * speed;
  114. if (parallax.options.direction == 'normal') {
  115. var pos = step * (h - ph);
  116. } else {
  117. var pos = (1 - step) * (h - ph);
  118. }
  119. if (parallax.isIE() && parallax.ieVersion() <= 10) {
  120. parallax.$image.css('top', '' + pos + 'px');
  121. }
  122. else if (parallax.isMobile() && parallax.options.mobile) {
  123. if (parallax.isTouched || parallax.isInit) {
  124. parallax.$image.stop().animate({pos: pos}, {
  125. step: function (pos) {
  126. $(this).css('transform', 'translate3d(0, ' + pos + 'px, 0)');
  127. },
  128. duration: parallax.options.duration
  129. }, parallax.options.easing);
  130. parallax.isInit = false;
  131. }
  132. } else {
  133. parallax.$image.css('transform', 'translate3d(0, ' + pos + 'px, 0)');
  134. }
  135. if (parallax.isFirefox() && window.devicePixelRatio < 1) {
  136. parallax.$image.css('background-color', '#010101');
  137. setTimeout(function () {
  138. parallax.$image.css('background-color', parallax.options.color);
  139. }, 10);
  140. }
  141. },
  142. resize: function () {
  143. var parallax = this,
  144. h = Math.max($(window).height(), 500);
  145. if (h < parallax.$wrap.outerHeight()) {
  146. h = parallax.$wrap.outerHeight() + $(window).height() * parallax.options.speed;
  147. }
  148. parallax.$image.height(h);
  149. setTimeout(function () {
  150. parallax.move();
  151. parallax.blur();
  152. }, 300);
  153. },
  154. blur: function () {
  155. var parallax = this;
  156. if (parallax.options.blur && !parallax.isIE() && !parallax.options.pattern) {
  157. $('<img/>', {src: parallax.options.url}).load(function () {
  158. var dh = parallax.$image.height() / this.height,
  159. dw = parallax.$image.width() / this.width,
  160. blur = Math.floor(Math.max(dh, dw));
  161. if (blur > 2) {
  162. parallax.$image.css({
  163. 'filter': 'blur(' + blur + 'px)',
  164. '-webkit-filter': 'blur(' + blur + 'px)'
  165. });
  166. } else {
  167. parallax.$image.css({
  168. 'filter': 'blur(' + 0 + 'px)',
  169. '-webkit-filter': 'blur(' + 0 + 'px)'
  170. });
  171. }
  172. });
  173. }
  174. },
  175. isVisible: function () {
  176. var parallax = this,
  177. windowScroll = $(window).scrollTop(),
  178. windowHeight = $(window).height(),
  179. parallaxOffset = parallax.$wrap.offset().top,
  180. parallaxHeight = parallax.$wrap.outerHeight();
  181. return (parallaxOffset + parallaxHeight >= windowScroll) && (parallaxOffset <= windowScroll + windowHeight)
  182. },
  183. isIE: function () {
  184. if (navigator.appVersion.indexOf("MSIE") != -1) {
  185. return true;
  186. }
  187. return false;
  188. },
  189. isMobile: function () {
  190. return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  191. },
  192. ieVersion: function () {
  193. return parseFloat(navigator.appVersion.split("MSIE")[1]);
  194. },
  195. isFirefox: function () {
  196. return typeof InstallTrigger !== 'undefined';
  197. }
  198. };
  199. $.fn.rdparallax = function (option) {
  200. var element = this.each(function () {
  201. var options = $.extend({}, $.fn.rdparallax.defaults, option);
  202. if (options.url) {
  203. new RDParallax(this, options).init();
  204. } else {
  205. console.error('RD Parallax: data-url is not defined');
  206. }
  207. });
  208. return element;
  209. };
  210. $.fn.rdparallax.defaults = {
  211. speed: 0.4,
  212. direction: 'normal',
  213. blur: false,
  214. mobile: false,
  215. url: false,
  216. pattern: false,
  217. duration: 200,
  218. easing: 'linear',
  219. color: 'inherit'
  220. };
  221. window.RDParallax_autoinit = function (selector) {
  222. $(selector).each(function () {
  223. var options = $.extend({}, $.fn.rdparallax.defaults, {
  224. url: $(this).data('url'),
  225. speed: $(this).data('speed'),
  226. direction: $(this).data('direction'),
  227. blur: $(this).data('blur'),
  228. mobile: $(this).data('mobile'),
  229. pattern: $(this).data('pattern'),
  230. color: $(this).data('color')
  231. });
  232. if (options.url) {
  233. new RDParallax(this, options).init();
  234. } else {
  235. console.error('RD Parallax: data-url is not defined');
  236. }
  237. });
  238. };
  239. })(jQuery);
  240. ;
  241. (function ($) {
  242. $(document).ready(function () {
  243. RDParallax_autoinit('.parallax');
  244. });
  245. })(jQuery);