https://www.namibpages.com/wp-content/plugins/wr-pagebuilder/asset…/scrollreveal/scrollReveal.js?ver=0.1.2

1
2(function(root, factory) {
3  if (typeof define === 'function' && define.amd) {
4    define(factory);
5  } else if (typeof exports === 'object') {
6    module.exports = factory(require, exports, module);
7  } else {
8    root.scrollReveal = factory();
9  }
10}(this, function(require, exports, module) {
11
12/*
13                       _ _ _____                      _   _
14                      | | |  __ \                    | | (_)
15    ___  ___ _ __ ___ | | | |__) |_____   _____  __ _| |  _ ___
16   / __|/ __| '__/ _ \| | |  _  // _ \ \ / / _ \/ _` | | | / __|
17   \__ \ (__| | | (_) | | | | \ \  __/\ V /  __/ (_| | |_| \__ \
18   |___/\___|_|  \___/|_|_|_|  \_\___| \_/ \___|\__,_|_(_) |___/ v.0.1.2
19                                                        _/ |
20                                                       |__/
21
22    "Declarative on-scroll reveal animations."
23
24/*=============================================================================
25
26    scrollReveal.js was inspired by cbpScroller.js (c) 2014 Codrops.
27
28    Licensed under the MIT license.
29    http://www.opensource.org/licenses/mit-license.php
30
31=============================================================================*/
32
33/*! scrollReveal.js v0.1.2 (c) 2014 Julian Lloyd | MIT license */
34
35/*===========================================================================*/
36
37
38window.scrollReveal = (function (window) {
39
40  'use strict';
41
42  function scrollReveal(options) {
43
44      this.docElem = window.document.documentElement;
45      this.options = this.extend(this.defaults, options);
46      this.styleBank = [];
47
48      if (this.options.init == true) this.init();
49  }
50
51  scrollReveal.prototype = {
52
53    defaults: {
54      after:  '0s',
55      enter:  'bottom',
56      move:   '24px',
57      over:   '0.66s',
58      easing: 'ease-in-out',
59
60  //  if 0, the element is considered in the viewport as soon as it enters
61  //  if 1, the element is considered in the viewport when it's fully visible
62      viewportFactor: 0.33,
63
64  // if false, animations occur only once
65  // if true, animations occur each time an element enters the viewport
66      reset: false,
67
68  // if true, scrollReveal.init() is automaticaly called upon instantiation
69      init: true
70    },
71
72    /*=============================================================================*/
73
74    init: function () {
75
76      this.scrolled = false;
77
78      var self = this;
79
80  //  Check DOM for the data-scrollReveal attribute
81  //  and initialize all found elements.
82      this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scroll-reveal]'));
83      this.elems.forEach(function (el, i) {
84
85    //  Capture original style attribute
86        if (!self.styleBank[el]) {
87          self.styleBank[el] = el.getAttribute('style');
88        }
89
90        self.update(el);
91      });
92
93      var scrollHandler = function () {
94        if (!self.scrolled) {
95          self.scrolled = true;
96          setTimeout(function () {
97            self._scrollPage();
98          }, 60);
99        }
100      };
101
102      var resizeHandler = function () {
103
104    //  If we’re still waiting for settimeout, reset the timer.
105        if (self.resizeTimeout) {
106          clearTimeout(self.resizeTimeout);
107        }
108        function delayed() {
109          self._scrollPage();
110          self.resizeTimeout = null;
111        }
112        self.resizeTimeout = setTimeout(delayed, 200);
113      };
114
115      window.addEventListener('scroll', scrollHandler, false);
116      window.addEventListener('resize', resizeHandler, false);
117    },
118
119    /*=============================================================================*/
120
121    _scrollPage: function () {
122        var self = this;
123
124        this.elems.forEach(function (el, i) {
125          self.update(el);
126        });
127        this.scrolled = false;
128    },
129
130    /*=============================================================================*/
131
132    parseLanguage: function (el) {
133
134  //  Splits on a sequence of one or more commas or spaces.
135      var words = el.getAttribute('data-scroll-reveal').split(/[, ]+/),
136          parsed = {};
137
138      function filter (words) {
139        var ret = [],
140
141            blacklist = [
142              "from",
143              "the",
144              "and",
145              "then",
146              "but",
147              "with"
148            ];
149
150        words.forEach(function (word, i) {
151          if (blacklist.indexOf(word) > -1) {
152            return;
153          }

154          ret.push(word);
155        });
156
157        return ret;
158      }
159
160      words = filter(words);
161
162      words.forEach(function (word, i) {
163
164        switch (word) {
165          case "enter":
166            parsed.enter = words[i + 1];
167            return;
168
169          case "after":
170            parsed.after = words[i + 1];
171            return;
172
173          case "wait":
174            parsed.after = words[i + 1];
175            return;
176
177          case "move":
178            parsed.move = words[i + 1];
179            return;
180
181          case "ease":
182            parsed.move = words[i + 1];
183            parsed.ease = "ease";
184            return;
185
186          case "ease-in":
187            parsed.move = words[i + 1];
188            parsed.easing = "ease-in";
189            return;
190
191          case "ease-in-out":
192            parsed.move = words[i + 1];
193            parsed.easing = "ease-in-out";
194            return;
195
196          case "ease-out":
197            parsed.move = words[i + 1];
198            parsed.easing = "ease-out";
199            return;
200
201          case "over":
202            parsed.over = words[i + 1];
203            return;
204
205          default:
206            return;
207        }
208      });
209
210      return parsed;
211    },
212
213
214    /*=============================================================================*/
215
216    update: function (el) {
217
218      var css   = this.genCSS(el);
219      var style = this.styleBank[el];
220
221      if (style != null) style += ";"; else style = "";
222
223      if (!el.getAttribute('data-scroll-reveal-initialized')) {
224        el.setAttribute('style', style + css.initial);
225        el.setAttribute('data-scroll-reveal-initialized', true);
226      }
227
228      if (!this.isElementInViewport(el, this.options.viewportFactor)) {
229        if (this.options.reset) {
230          el.setAttribute('style', style + css.initial + css.reset);
231        }
232        return;
233      }
234
235      if (el.getAttribute('data-scroll-reveal-complete')) return;
236
237      if (this.isElementInViewport(el, this.options.viewportFactor)) {
238        el.setAttribute('style', style + css.target + css.transition);
239    //  Without reset enabled, we can safely remove the style tag
240    //  to prevent CSS specificy wars with authored CSS.
241        if (!this.options.reset) {
242          setTimeout(function () {
243            if (style != "") {
244              el.setAttribute('style', style);
245            } else {
246              el.removeAttribute('style');
247            }
248            el.setAttribute('data-scroll-reveal-complete',true);
249          }, css.totalDuration);
250        }
251      return;
252      }
253    },
254
255    /*=============================================================================*/
256
257    genCSS: function (el) {
258      var parsed = this.parseLanguage(el),
259          enter,
260          axis;
261
262      if (parsed.enter) {
263
264        if (parsed.enter == "top" || parsed.enter == "bottom") {
265          enter = parsed.enter;
266          axis = "y";
267        }
268
269        if (parsed.enter == "left" || parsed.enter == "right") {
270          enter = parsed.enter;
271          axis = "x";
272        }
273
274      } else {
275
276        if (this.options.enter == "top" || this.options.enter == "bottom") {
277          enter = this.options.enter
278          axis = "y";
279        }
280
281        if (this.options.enter == "left" || this.options.enter == "right") {
282          enter = this.options.enter
283          axis = "x";
284        }
285      }
286
287  //  After all values are parsed, let’s make sure our our
288  //  pixel distance is negative for top and left entrances.
289  //
290  //  ie. "move 25px from top" starts at 'top: -25px' in CSS.
291
292      if (enter == "top" || enter == "left") {
293        if (parsed.move) {
294          parsed.move = "-" + parsed.move;
295        }
296        else {
297          parsed.move = "-" + this.options.move;
298        }
299      }
300
301      var dist   = parsed.move    || this.options.move,
302          dur    = parsed.over    || this.options.over,
303          delay  = parsed.after   || this.options.after,
304          easing = parsed.easing  || this.options.easing;
305
306      var transition = "-webkit-transition: -webkit-transform " + dur + " " + easing + " " + delay + ",  opacity " + dur + " " + easing + " " + delay + ";" +
307                               "transition: transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" +
308                      "-webkit-perspective: 1000;" +
309              "-webkit-backface-visibility: hidden;";
310
311  //  The same as transition, but removing the delay for elements fading out.
312      var reset = "-webkit-transition: -webkit-transform " + dur + " " + easing + " 0s,  opacity " + dur + " " + easing + " " + delay + ";" +
313                          "transition: transform " + dur + " " + easing + " 0s,  opacity " + dur + " " + easing + " " + delay + ";" +
314                 "-webkit-perspective: 1000;" +
315         "-webkit-backface-visibility: hidden;";
316
317      var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" +
318                            "transform: translate" + axis + "(" + dist + ");" +
319                              "opacity: 0;";
320
321      var target = "-webkit-transform: translate" + axis + "(0);" +
322                           "transform: translate" + axis + "(0);" +
323                             "opacity: 1;";
324      return {
325        transition: transition,
326        initial: initial,
327        target: target,
328        reset: reset,
329        totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000)
330      };
331    },
332
333    getViewportH : function () {
334      var client = this.docElem['clientHeight'],

335        inner = window['innerHeight'];
336
337      return (client < inner) ? inner : client;
338    },
339
340    getOffset : function(el) {
341      var offsetTop = 0,
342          offsetLeft = 0;
343
344      do {
345        if (!isNaN(el.offsetTop)) {
346          offsetTop += el.offsetTop;
347        }
348        if (!isNaN(el.offsetLeft)) {
349          offsetLeft += el.offsetLeft;
350        }
351      } while (el = el.offsetParent)
352
353      return {
354        top: offsetTop,
355        left: offsetLeft
356      }
357    },
358
359    isElementInViewport : function(el, h) {
360      var scrolled = window.pageYOffset,
361          viewed = scrolled + this.getViewportH(),
362          elH = el.offsetHeight,
363          elTop = this.getOffset(el).top,
364          elBottom = elTop + elH,
365          h = h || 0;
366
367      return (elTop + elH * h) <= viewed
368          && (elBottom) >= scrolled
369          || (el.currentStyle? el.currentStyle : window.getComputedStyle(el, null)).position == 'fixed';
370    },
371
372    extend: function (a, b){
373      for (var key in b) {
374        if (b.hasOwnProperty(key)) {
375          a[key] = b[key];
376        }
377      }
378      return a;
379    }
380  }; // end scrollReveal.prototype
381
382  return scrollReveal;
383})(window);
384
385return scrollReveal;
386
387}));