API tools faq
paste
Advertisement
BackuPs-nl

Jarallax Fix IE Edge Choppy behaviour

BackuPs-nl
Dec 9th, 2016
302
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 25.69 KB | None | 0 0
raw download clone embed print report
  1. /*!
  2.  * Name    : Just Another Parallax [Jarallax]
  3.  * Version : 1.7.2
  4.  * Author  : _nK https://nkdev.info
  5.  * GitHub  : https://github.com/nk-o/jarallax
  6.  */
  7. (function (window) {
  8.     'use strict';
  9.  
  10.     // Adapted from https://gist.github.com/paulirish/1579671
  11.     if(!Date.now) {
  12.         Date.now = function () { return new Date().getTime(); };
  13.     }
  14.     if(!window.requestAnimationFrame) {
  15.         (function () {
  16.  
  17.             var vendors = ['webkit', 'moz'];
  18.             for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
  19.                 var vp = vendors[i];
  20.                 window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
  21.                 window.cancelAnimationFrame = window[vp+'CancelAnimationFrame']
  22.                                            || window[vp+'CancelRequestAnimationFrame'];
  23.             }
  24.             if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
  25.                 || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
  26.                 var lastTime = 0;
  27.                 window.requestAnimationFrame = function (callback) {
  28.                     var now = Date.now();
  29.                     var nextTime = Math.max(lastTime + 16, now);
  30.                     return setTimeout(function () { callback(lastTime = nextTime); },
  31.                                       nextTime - now);
  32.                 };
  33.                 window.cancelAnimationFrame = clearTimeout;
  34.             }
  35.         }());
  36.     }
  37.  
  38.     var supportTransform = (function () {
  39.         if (!window.getComputedStyle) {
  40.             return false;
  41.         }
  42.  
  43.         var el = document.createElement('p'),
  44.             has3d,
  45.             transforms = {
  46.                 'webkitTransform':'-webkit-transform',
  47.                 'OTransform':'-o-transform',
  48.                 'msTransform':'-ms-transform',
  49.                 'MozTransform':'-moz-transform',
  50.                 'transform':'transform'
  51.             };
  52.  
  53.         // Add it to the body to get the computed style.
  54.         (document.body || document.documentElement).insertBefore(el, null);
  55.  
  56.         for (var t in transforms) {
  57.             if (typeof el.style[t] !== 'undefined') {
  58.                 el.style[t] = "translate3d(1px,1px,1px)";
  59.                 has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
  60.             }
  61.         }
  62.  
  63.         (document.body || document.documentElement).removeChild(el);
  64.  
  65.         return typeof has3d !== 'undefined' && has3d.length > 0 && has3d !== "none";
  66.     }());
  67.  
  68.     var isAndroid = navigator.userAgent.toLowerCase().indexOf('android') > -1;
  69.     var isIOs = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  70.     var isOperaOld = !!window.opera;
  71.     var isEdge = /Edge\/\d+/.test(navigator.userAgent);
  72.     var isIE11 = /Trident.*rv[ :]*11\./.test(navigator.userAgent);
  73.     var isIE10 = !!Function('/*@cc_on return document.documentMode===10@*/')();
  74.     var isIElt10 = document.all && !window.atob;
  75.  
  76.     var wndW;
  77.     var wndH;
  78.     function updateWndVars () {
  79.         wndW = window.innerWidth || document.documentElement.clientWidth;
  80.         wndH = window.innerHeight || document.documentElement.clientHeight;
  81.     }
  82.     updateWndVars();
  83.  
  84.     // list with all jarallax instances
  85.     // need to render all in one scroll/resize event
  86.     var jarallaxList = [];
  87.  
  88.     // Jarallax instance
  89.     var Jarallax = (function () {
  90.         var instanceID = 0;
  91.  
  92.         function Jarallax_inner (item, userOptions) {
  93.             var _this = this,
  94.                 dataOptions;
  95.  
  96.             _this.$item      = item;
  97.  
  98.             _this.defaults   = {
  99.                 type              : 'scroll', // type of parallax: scroll, scale, opacity, scale-opacity, scroll-opacity
  100.                 speed             : 0.5, // supported value from -1 to 2
  101.                 imgSrc            : null,
  102.                 imgWidth          : null,
  103.                 imgHeight         : null,
  104.                 enableTransform   : true,
  105.                 elementInViewport : null,
  106.                 zIndex            : -100,
  107.                 noAndroid         : false,
  108.                 noIos             : true,
  109.  
  110.                 // events
  111.                 onScroll          : null, // function(calculations) {}
  112.                 onInit            : null, // function() {}
  113.                 onDestroy         : null, // function() {}
  114.                 onCoverImage      : null  // function() {}
  115.             };
  116.             dataOptions      = JSON.parse(_this.$item.getAttribute('data-jarallax') || '{}');
  117.             _this.options    = _this.extend({}, _this.defaults, dataOptions, userOptions);
  118.  
  119.             // stop init if android or ios
  120.             if(isAndroid && _this.options.noAndroid || isIOs && _this.options.noIos) {
  121.                 return;
  122.             }
  123.  
  124.             // fix speed option [-1.0, 2.0]
  125.             _this.options.speed = Math.min(2, Math.max(-1, parseFloat(_this.options.speed)));
  126.  
  127.             // custom element to check if parallax in viewport
  128.             var elementInVP = _this.options.elementInViewport;
  129.             // get first item from array
  130.             if(elementInVP && typeof elementInVP === 'object' && typeof elementInVP.length !== 'undefined') {
  131.                 elementInVP = elementInVP[0];
  132.             }
  133.             // check if dom element
  134.             if(!elementInVP instanceof Element) {
  135.                 elementInVP = null;
  136.             }
  137.             _this.options.elementInViewport = elementInVP;
  138.  
  139.             _this.instanceID = instanceID++;
  140.  
  141.             _this.image      = {
  142.                 src        : _this.options.imgSrc || null,
  143.                 $container : null,
  144.                 $item      : null,
  145.                 width      : _this.options.imgWidth || null,
  146.                 height     : _this.options.imgHeight || null,
  147.                 // fix for some devices
  148.                 // use <img> instead of background image - more smoothly
  149.                 useImgTag  : isIOs || isAndroid || isOperaOld || isIE11 || isIE10 || isEdge
  150.             };
  151.  
  152.             if(_this.initImg()) {
  153.                 _this.init();
  154.             }
  155.         }
  156.  
  157.         return Jarallax_inner;
  158.     }());
  159.  
  160.     // add styles to element
  161.     Jarallax.prototype.css = function (el, styles) {
  162.         if(typeof styles === 'string') {
  163.             if(window.getComputedStyle) {
  164.                 return window.getComputedStyle(el).getPropertyValue(styles);
  165.             }
  166.             return el.style[styles];
  167.         }
  168.  
  169.         // add transform property with vendor prefixes
  170.         if(styles.transform) {
  171.             styles.WebkitTransform = styles.MozTransform = styles.transform;
  172.         }
  173.  
  174.         for(var k in styles) {
  175.             el.style[k] = styles[k];
  176.         }
  177.         return el;
  178.     };
  179.     // Extend like jQuery.extend
  180.     Jarallax.prototype.extend = function (out) {
  181.         out = out || {};
  182.         for (var i = 1; i < arguments.length; i++) {
  183.             if (!arguments[i]) {
  184.                 continue;
  185.             }
  186.             for (var key in arguments[i]) {
  187.                 if (arguments[i].hasOwnProperty(key)) {
  188.                     out[key] = arguments[i][key];
  189.                 }
  190.             }
  191.         }
  192.         return out;
  193.     };
  194.  
  195.     // Jarallax functions
  196.     Jarallax.prototype.initImg = function () {
  197.         var _this = this;
  198.  
  199.         // get image src
  200.         if(_this.image.src === null) {
  201.             _this.image.src = _this.css(_this.$item, 'background-image').replace(/^url\(['"]?/g,'').replace(/['"]?\)$/g,'');
  202.         }
  203.         return !(!_this.image.src || _this.image.src === 'none');
  204.     };
  205.  
  206.     Jarallax.prototype.init = function () {
  207.         var _this = this,
  208.             containerStyles = {
  209.                 position         : 'absolute',
  210.                 top              : 0,
  211.                 left             : 0,
  212.                 width            : '100%',
  213.                 height           : '100%',
  214.                 overflow         : 'hidden',
  215.                 pointerEvents    : 'none'
  216.             },
  217.             imageStyles = {
  218.                 position         : 'fixed'
  219.             };
  220.  
  221.         // container for parallax image
  222.         _this.image.$container = document.createElement('div');
  223.         _this.css(_this.image.$container, containerStyles);
  224.         _this.css(_this.image.$container, {
  225.             visibility : 'hidden',
  226.             'z-index'  : _this.options.zIndex
  227.         });
  228.         _this.image.$container.setAttribute('id', 'jarallax-container-' + _this.instanceID);
  229.         _this.$item.appendChild(_this.image.$container);
  230.  
  231.         // use img tag
  232.         if(_this.image.useImgTag && supportTransform && _this.options.enableTransform) {
  233.             _this.image.$item = document.createElement('img');
  234.             _this.image.$item.setAttribute('src', _this.image.src);
  235.             imageStyles = _this.extend({
  236.                 'max-width' : 'none'
  237.             }, containerStyles, imageStyles);
  238.         }
  239.  
  240.         // use div with background image
  241.         else {
  242.             _this.image.$item = document.createElement('div');
  243.             imageStyles = _this.extend({
  244.                 'background-position' : '50% 50%',
  245.                 'background-size'     : '100% auto',
  246.                 'background-repeat'   : 'no-repeat no-repeat',
  247.                 'background-image'    : 'url("' + _this.image.src + '")'
  248.             }, containerStyles, imageStyles);
  249.         }
  250.  
  251.         if(isIElt10 || isIE11 || isIE10 || isEdge ) {
  252.             imageStyles.backgroundAttachment = 'fixed';
  253.         } else imageStyles.backgroundAttachment = 'scroll';
  254.  
  255.         // check if one of parents have transform style (without this check, scroll transform will be inverted)
  256.         // discussion - https://github.com/nk-o/jarallax/issues/9
  257.         _this.parentWithTransform = 0;
  258.         var $itemParents = _this.$item;
  259.         while ($itemParents !== null && $itemParents !== document && _this.parentWithTransform === 0) {
  260.             var parent_transform = _this.css($itemParents, '-webkit-transform') || _this.css($itemParents, '-moz-transform') || _this.css($itemParents, 'transform');
  261.             if(parent_transform && parent_transform !== 'none') {
  262.                 _this.parentWithTransform = 1;
  263.  
  264.                 // add transform on parallax container if there is parent with transform
  265.                 _this.css(_this.image.$container, {
  266.                     transform: 'translateX(0) translateY(0)'
  267.                 });
  268.             }
  269.             $itemParents = $itemParents.parentNode;
  270.         }
  271.  
  272.         // parallax image
  273.         _this.css(_this.image.$item, imageStyles);
  274.         _this.image.$container.appendChild(_this.image.$item);
  275.  
  276.         // cover image if width and height is ready
  277.         function initAfterReady () {
  278.             _this.coverImage();
  279.             _this.clipContainer();
  280.             _this.onScroll(true);
  281.  
  282.             // save default user styles
  283.             _this.$item.setAttribute('data-jarallax-original-styles', _this.$item.getAttribute('style'));
  284.  
  285.             // call onInit event
  286.             if(_this.options.onInit) {
  287.                 _this.options.onInit.call(_this);
  288.             }
  289.  
  290.             // timeout to fix IE blinking
  291.             setTimeout(function () {
  292.                 if(_this.$item) {
  293.                     if(isIElt10 || isIE11 || isIE10 || isEdge ) {
  294.                     $backgroundAttachment = 'fixed';
  295.                     } else $backgroundAttachment = 'scroll';
  296.  
  297.                     // remove default user background
  298.                     _this.css(_this.$item, {
  299.                         'background-image'      : 'none',
  300.                         'background-attachment' : $backgroundAttachment,
  301.                         'background-size'       : 'auto'
  302.                     });
  303.                 }
  304.             }, 0);
  305.         }
  306.  
  307.         if(_this.image.width && _this.image.height) {
  308.             // init if width and height already exists
  309.             initAfterReady();
  310.         } else {
  311.             // load image and get width and height
  312.             _this.getImageSize(_this.image.src, function (width, height) {
  313.                 _this.image.width  = width;
  314.                 _this.image.height = height;
  315.                 initAfterReady();
  316.             });
  317.         }
  318.  
  319.         jarallaxList.push(_this);
  320.     };
  321.  
  322.     Jarallax.prototype.destroy = function () {
  323.         var _this = this;
  324.  
  325.         // remove from instances list
  326.         for(var k = 0, len = jarallaxList.length; k < len; k++) {
  327.             if(jarallaxList[k].instanceID === _this.instanceID) {
  328.                 jarallaxList.splice(k, 1);
  329.                 break;
  330.             }
  331.         }
  332.  
  333.         // return styles on container as before jarallax init
  334.         var originalStylesTag = _this.$item.getAttribute('data-jarallax-original-styles');
  335.         _this.$item.removeAttribute('data-jarallax-original-styles');
  336.         // null occurs if there is no style tag before jarallax init
  337.         if(originalStylesTag === 'null') {
  338.             _this.$item.removeAttribute('style');
  339.         } else {
  340.             _this.$item.setAttribute('style', originalStylesTag);
  341.         }
  342.  
  343.         // remove additional dom elements
  344.         if(_this.$clipStyles) {
  345.             _this.$clipStyles.parentNode.removeChild(_this.$clipStyles);
  346.         }
  347.         _this.image.$container.parentNode.removeChild(_this.image.$container);
  348.  
  349.         // call onDestroy event
  350.         if(_this.options.onDestroy) {
  351.             _this.options.onDestroy.call(_this);
  352.         }
  353.  
  354.         // delete jarallax from item
  355.         delete _this.$item.jarallax;
  356.  
  357.         // delete all variables
  358.         for(var n in _this) {
  359.             delete _this[n];
  360.         }
  361.     };
  362.  
  363.     Jarallax.prototype.getImageSize = function (src, callback) {
  364.         if(!src || !callback) {
  365.             return;
  366.         }
  367.  
  368.         var tempImg = new Image();
  369.         tempImg.onload = function () {
  370.             callback(tempImg.width, tempImg.height);
  371.         };
  372.         tempImg.src = src;
  373.     };
  374.  
  375.     // it will remove some image overlapping
  376.     // overlapping occur due to an image position fixed inside absolute position element (webkit based browsers works without any fix)
  377.     Jarallax.prototype.clipContainer = function () {
  378.         // clip is not working properly on real IE9 and less
  379.         if(isIElt10) {
  380.             return;
  381.         }
  382.  
  383.         var _this  = this,
  384.             rect   = _this.image.$container.getBoundingClientRect(),
  385.             width  = rect.width,
  386.             height = rect.height;
  387.  
  388.         if(!_this.$clipStyles) {
  389.             _this.$clipStyles = document.createElement('style');
  390.             _this.$clipStyles.setAttribute('type', 'text/css');
  391.             _this.$clipStyles.setAttribute('id', '#jarallax-clip-' + _this.instanceID);
  392.             var head = document.head || document.getElementsByTagName('head')[0];
  393.             head.appendChild(_this.$clipStyles);
  394.         }
  395.  
  396.         var styles = [
  397.             '#jarallax-container-' + _this.instanceID + ' {',
  398.             '   clip: rect(0 ' + width + 'px ' + height + 'px 0);',
  399.             '   clip: rect(0, ' + width + 'px, ' + height + 'px, 0);',
  400.             '}'
  401.         ].join('\n');
  402.  
  403.         // add clip styles inline (this method need for support IE8 and less browsers)
  404.         if (_this.$clipStyles.styleSheet){
  405.             _this.$clipStyles.styleSheet.cssText = styles;
  406.         } else {
  407.             _this.$clipStyles.innerHTML = styles;
  408.         }
  409.     };
  410.  
  411.     Jarallax.prototype.coverImage = function () {
  412.         var _this = this;
  413.  
  414.         if(!_this.image.width || !_this.image.height) {
  415.             return;
  416.         }
  417.  
  418.         var rect       = _this.image.$container.getBoundingClientRect(),
  419.             contW      = rect.width,
  420.             contH      = rect.height,
  421.             contL      = rect.left,
  422.             imgW       = _this.image.width,
  423.             imgH       = _this.image.height,
  424.             speed      = _this.options.speed,
  425.             isScroll   = _this.options.type === 'scroll' || _this.options.type === 'scroll-opacity',
  426.             scrollDist = 0,
  427.             resultW    = 0,
  428.             resultH    = contH,
  429.             resultML   = 0,
  430.             resultMT   = 0;
  431.  
  432.         // scroll parallax
  433.         if(isScroll) {
  434.             // scroll distance
  435.             scrollDist = speed * (contH + wndH) / 2;
  436.             if(speed < 0 || speed > 1) {
  437.                 scrollDist = speed * Math.max(contH, wndH) / 2;
  438.             }
  439.  
  440.             // size for scroll parallax
  441.             if(speed < 0 || speed > 1) {
  442.                 resultH = Math.max(contH, wndH) + Math.abs(scrollDist) * 2;
  443.             } else {
  444.                 resultH += Math.abs(wndH - contH) * (1 - speed);
  445.             }
  446.         }
  447.  
  448.         // calculate width relative to height and image size
  449.         resultW = resultH * imgW / imgH;
  450.         if(resultW < contW) {
  451.             resultW = contW;
  452.             resultH = resultW * imgH / imgW;
  453.         }
  454.  
  455.         // when disabled transformations, height should be >= window height
  456.         _this.bgPosVerticalCenter = 0;
  457.         if(isScroll && resultH < wndH && (!supportTransform || !_this.options.enableTransform)) {
  458.             _this.bgPosVerticalCenter = (wndH - resultH) / 2;
  459.             resultH = wndH;
  460.         }
  461.  
  462.         // center parallax image
  463.         if(isScroll) {
  464.             resultML = contL + (contW - resultW) / 2;
  465.             resultMT = (wndH - resultH) / 2;
  466.         } else {
  467.             resultML = (contW - resultW) / 2;
  468.             resultMT = (contH - resultH) / 2;
  469.         }
  470.  
  471.         // fix if parents with transform style
  472.         if(supportTransform && _this.options.enableTransform && _this.parentWithTransform) {
  473.             resultML -= contL;
  474.         }
  475.  
  476.         // store scroll distance
  477.         _this.parallaxScrollDistance = scrollDist;
  478.  
  479.         // apply result to item
  480.         _this.css(_this.image.$item, {
  481.             width: resultW + 'px',
  482.             height: resultH + 'px',
  483.             marginLeft: resultML + 'px',
  484.             marginTop: resultMT + 'px'
  485.         });
  486.  
  487.         // call onCoverImage event
  488.         if(_this.options.onCoverImage) {
  489.             _this.options.onCoverImage.call(_this);
  490.         }
  491.     };
  492.  
  493.     Jarallax.prototype.isVisible = function () {
  494.         return this.isElementInViewport || false;
  495.     };
  496.  
  497.     Jarallax.prototype.onScroll = function (force) {
  498.         var _this = this;
  499.  
  500.         if(!_this.image.width || !_this.image.height) {
  501.             return;
  502.         }
  503.  
  504.         var rect   = _this.$item.getBoundingClientRect(),
  505.             contT  = rect.top,
  506.             contH  = rect.height,
  507.             styles = {
  508.                 position           : 'absolute',
  509.                 visibility         : 'visible',
  510.                 backgroundPosition : '50% 50%'
  511.             };
  512.  
  513.         // check if in viewport
  514.         var viewportRect = rect;
  515.         if(_this.options.elementInViewport) {
  516.             viewportRect = _this.options.elementInViewport.getBoundingClientRect();
  517.         }
  518.         _this.isElementInViewport =
  519.             viewportRect.bottom >= 0 &&
  520.             viewportRect.right >= 0 &&
  521.             viewportRect.top <= wndH &&
  522.             viewportRect.left <= wndW;
  523.  
  524.         // stop calculations if item is not in viewport
  525.         if (force ? false : !_this.isElementInViewport) {
  526.             return;
  527.         }
  528.  
  529.         // calculate parallax helping variables
  530.         var beforeTop = Math.max(0, contT),
  531.             beforeTopEnd = Math.max(0, contH + contT),
  532.             afterTop = Math.max(0, -contT),
  533.             beforeBottom = Math.max(0, contT + contH - wndH),
  534.             beforeBottomEnd = Math.max(0, contH - (contT + contH - wndH)),
  535.             afterBottom = Math.max(0, -contT + wndH - contH),
  536.             fromViewportCenter = 1 - 2 * (wndH - contT) / (wndH + contH);
  537.  
  538.         // calculate on how percent of section is visible
  539.         var visiblePercent = 1;
  540.         if(contH < wndH) {
  541.             visiblePercent = 1 - (afterTop || beforeBottom) / contH;
  542.         } else {
  543.             if(beforeTopEnd <= wndH) {
  544.                 visiblePercent = beforeTopEnd / wndH;
  545.             } else if (beforeBottomEnd <= wndH) {
  546.                 visiblePercent = beforeBottomEnd / wndH;
  547.             }
  548.         }
  549.  
  550.         // opacity
  551.         if(_this.options.type === 'opacity' || _this.options.type === 'scale-opacity' || _this.options.type === 'scroll-opacity') {
  552.             styles.transform = 'translate3d(0, 0, 0)';
  553.             styles.opacity = visiblePercent;
  554.         }
  555.  
  556.         // scale
  557.         if(_this.options.type === 'scale' || _this.options.type === 'scale-opacity') {
  558.             var scale = 1;
  559.             if(_this.options.speed < 0) {
  560.                 scale -= _this.options.speed * visiblePercent;
  561.             } else {
  562.                 scale += _this.options.speed * (1 - visiblePercent);
  563.             }
  564.             styles.transform = 'scale(' + scale + ') translate3d(0, 0, 0)';
  565.         }
  566.  
  567.         // scroll
  568.         if(_this.options.type === 'scroll' || _this.options.type === 'scroll-opacity') {
  569.             var positionY = _this.parallaxScrollDistance * fromViewportCenter;
  570.  
  571.             if(supportTransform && _this.options.enableTransform) {
  572.                 // fix if parents with transform style
  573.                 if(_this.parentWithTransform) {
  574.                     positionY -= contT;
  575.                 }
  576.  
  577.                 styles.transform = 'translate3d(0, ' + positionY + 'px, 0)';
  578.             } else if (_this.image.useImgTag) {
  579.                 styles.top = positionY + 'px';
  580.             } else {
  581.                 // vertical centering
  582.                 if(_this.bgPosVerticalCenter) {
  583.                     positionY += _this.bgPosVerticalCenter;
  584.                 }
  585.                 styles.backgroundPosition = '50% ' + positionY + 'px';
  586.             }
  587.  
  588.             // fixed position is not work properly for IE9 and less
  589.             // solution - use absolute position and emulate fixed by using container offset
  590.             styles.position = isIElt10 ? 'absolute' : 'fixed';
  591.         }
  592.  
  593.         _this.css(_this.image.$item, styles);
  594.  
  595.         // call onScroll event
  596.         if(_this.options.onScroll) {
  597.             _this.options.onScroll.call(_this, {
  598.                 section: rect,
  599.  
  600.                 beforeTop: beforeTop,
  601.                 beforeTopEnd: beforeTopEnd,
  602.                 afterTop: afterTop,
  603.                 beforeBottom: beforeBottom,
  604.                 beforeBottomEnd: beforeBottomEnd,
  605.                 afterBottom: afterBottom,
  606.  
  607.                 visiblePercent: visiblePercent,
  608.                 fromViewportCenter: fromViewportCenter
  609.             });
  610.         }
  611.     };
  612.  
  613.  
  614.     // init events
  615.     function addEventListener (el, eventName, handler) {
  616.         if (el.addEventListener) {
  617.             el.addEventListener(eventName, handler);
  618.         } else {
  619.             el.attachEvent('on' + eventName, function (){
  620.                 handler.call(el);
  621.             });
  622.         }
  623.     }
  624.  
  625.     function update (e) {
  626.         window.requestAnimationFrame(function () {
  627.             if(e.type !== 'scroll') {
  628.                 updateWndVars();
  629.             }
  630.             for(var k = 0, len = jarallaxList.length; k < len; k++) {
  631.                 // cover image and clip needed only when parallax container was changed
  632.                 if(e.type !== 'scroll') {
  633.                     jarallaxList[k].coverImage();
  634.                     jarallaxList[k].clipContainer();
  635.                 }
  636.                 jarallaxList[k].onScroll();
  637.             }
  638.         });
  639.     }
  640.     addEventListener(window, 'scroll', update);
  641.     addEventListener(window, 'resize', update);
  642.     addEventListener(window, 'orientationchange', update);
  643.     addEventListener(window, 'load', update);
  644.  
  645.  
  646.     // global definition
  647.     var plugin = function (items) {
  648.         // check for dom element
  649.         // thanks: http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object
  650.         if(typeof HTMLElement === "object" ? items instanceof HTMLElement : items && typeof items === "object" && items !== null && items.nodeType === 1 && typeof items.nodeName==="string") {
  651.             items = [items];
  652.         }
  653.  
  654.         var options = arguments[1],
  655.             args = Array.prototype.slice.call(arguments, 2),
  656.             len = items.length,
  657.             k = 0,
  658.             ret;
  659.  
  660.         for (k; k < len; k++) {
  661.             if (typeof options === 'object' || typeof options === 'undefined') {
  662.                 if(!items[k].jarallax) {
  663.                     items[k].jarallax = new Jarallax(items[k], options);
  664.                 }
  665.             }
  666.             else if(items[k].jarallax) {
  667.                 ret = items[k].jarallax[options].apply(items[k].jarallax, args);
  668.             }
  669.             if (typeof ret !== 'undefined') {
  670.                 return ret;
  671.             }
  672.         }
  673.  
  674.         return items;
  675.     };
  676.     plugin.constructor = Jarallax;
  677.  
  678.     // no conflict
  679.     var oldPlugin = window.jarallax;
  680.     window.jarallax = plugin;
  681.     window.jarallax.noConflict = function () {
  682.         window.jarallax = oldPlugin;
  683.         return this;
  684.     };
  685.  
  686.     // jQuery support
  687.     if(typeof jQuery !== 'undefined') {
  688.         var jQueryPlugin = function () {
  689.             var args = arguments || [];
  690.             Array.prototype.unshift.call(args, this);
  691.             var res = plugin.apply(window, args);
  692.             return typeof res !== 'object' ? res : this;
  693.         };
  694.         jQueryPlugin.constructor = Jarallax;
  695.  
  696.         // no conflict
  697.         var oldJqPlugin = jQuery.fn.jarallax;
  698.         jQuery.fn.jarallax = jQueryPlugin;
  699.         jQuery.fn.jarallax.noConflict = function () {
  700.             jQuery.fn.jarallax = oldJqPlugin;
  701.             return this;
  702.         };
  703.     }
  704.  
  705.     // data-jarallax initialization
  706.     addEventListener(window, 'DOMContentLoaded', function () {
  707.         plugin(document.querySelectorAll('[data-jarallax], [data-jarallax-video]'));
  708.     });
  709. }(window));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!