https://www.blackanddecker.es/sites/g/files/xnuzat3376/files/cohes…/jquery.paroller.js?tl1qlh

1/**
2 * @sitestudioexcludesonar
3 * jQuery plugin paroller.js v1.3.1
4 * https://github.com/tgomilar/paroller.js
5 * preview: https://tgomilar.github.io/paroller/
6 **/
7(function (factory) {
8  'use strict';
9
10  if (typeof module === 'object' && typeof module.exports === 'object') {
11    module.exports = factory(require('jquery'));
12  }
13  else {
14    factory(jQuery);
15  }
16})(function ($) {
17  'use strict';
18
19  var setDirection = {
20    bgVertical: function (elem, bgOffset, bgStart) {
21      return elem.css({'backgroundPositionY': 'calc(' + -bgOffset + 'px + ' + bgStart + ')'});
22    },
23    bgHorizontal: function (elem, bgOffset, bgStart) {
24      return elem.css({'backgroundPositionX': 'calc(' + -bgOffset + 'px + ' + bgStart + ')'});
25    },
26    vertical: function (elem, elemOffset, oldTransform) {
27      (oldTransform === 'none' ? oldTransform = '' : true);
28      return elem.css({
29        '-webkit-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
30        '-moz-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
31        'transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
32        'transition': 'transform linear',
33        'will-change': 'transform'
34      });
35    },
36    horizontal: function (elem, elemOffset, oldTransform) {
37      (oldTransform === 'none' ? oldTransform = '' : true);
38      return elem.css({
39        '-webkit-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,

40        '-moz-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
41        'transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
42        'transition': 'transform linear',
43        'will-change': 'transform'
44      });
45    }
46  };
47
48  $.fn.paroller = function (options) {
49    var windowHeight = $(window).height();
50    var documentHeight = $(document).height();
51
52    // default options
53    options = $.extend({
54      factor: 0, // - to +
55      type: 'background', // foreground
56      direction: 'vertical', // horizontal
57      bgstart: 0
58    }, options);
59
60    return this.each(function () {
61      var working = false;
62      var $this = $(this);
63      var offset = $this.offset().top;
64      var height = $this.outerHeight();
65      var dataFactor = $this.data('paroller-factor');
66      var dataType = $this.data('paroller-type');
67      var dataDirection = $this.data('paroller-direction');
68      var dataBgStart = $this.data('paroller-bg-start');
69      var factor = (dataFactor) ? dataFactor : options.factor;
70      var type = (dataType) ? dataType : options.type;
71      var direction = (dataDirection) ? dataDirection : options.direction;
72      var bgStart = (dataBgStart) ? dataBgStart : options.bgstart;
73      var bgOffset = Math.round(offset * factor);
74      var transform = Math.round((offset - (windowHeight / 2) + height) * factor);
75
76      /* Transform directive of element before paroller */
77      var oldTransform = $this.css('transform');
78
79      if (type === 'background') {
80
81        if(typeof bgStart === 'number') {
82          bgStart = bgStart + 'px';
83        }
84
85        if(!bgStart.length) {
86          bgStart = '0';
87        }
88        //if last char is a number, there is no unit specified, add px.
89        if(typeof (bgStart.slice(-1) === 'number') ) {
90          bgStart = bgStart + 'px';
91        }
92
93        if (direction === 'vertical') {
94          setDirection.bgVertical($this, bgOffset, bgStart);
95        }
96        else if (direction === 'horizontal') {
97          setDirection.bgHorizontal($this, bgOffset, bgStart);
98        }
99      }
100      else if (type === 'foreground') {
101        if (direction === 'vertical') {
102          setDirection.vertical($this, transform, oldTransform);
103        }
104        else if (direction === 'horizontal') {
105          setDirection.horizontal($this, transform, oldTransform);
106        }
107      }
108
109      $(window).on('scroll.paroller', onScroll).trigger('scroll');
110
111      function scrollAction() {
112        working = false;
113      }
114
115      function onScroll() {
116        if (!working) {
117          var scrolling = $(this).scrollTop();
118          documentHeight = $(document).height();
119
120          bgOffset = Math.round((offset - scrolling) * factor);
121          transform = Math.round(((offset - (windowHeight / 2) + height) - scrolling) * factor);
122
123          if (type === 'background') {
124            if (direction === 'vertical') {
125              setDirection.bgVertical($this, bgOffset, bgStart);
126            }
127            else if (direction === 'horizontal') {
128              setDirection.bgHorizontal($this, bgOffset, bgStart);
129            }
130          }
131          else if ((type === 'foreground') && (scrolling <= documentHeight)) {
132            if (direction === 'vertical') {
133              setDirection.vertical($this, transform, oldTransform);
134            }
135            else if (direction === 'horizontal') {
136              setDirection.horizontal($this, transform, oldTransform);
137            }
138          }
139
140          window.requestAnimationFrame(scrollAction);
141          working = true;
142        }
143      }
144    });
145  };
146});