1/*! 2 * Name : Just Another Parallax [Jarallax] 3 * Version : 1.10.7 4 * Author : nK <https://nkdev.info> 5 * GitHub : https://github.com/nk-o/jarallax 6 */ 7/******/ (function(modules) { // webpackBootstrap 8/******/ // The module cache 9/******/ var installedModules = {}; 10/******/ 11/******/ // The require function 12/******/ function __webpack_require__(moduleId) { 13/******/ 14/******/ // Check if module is in cache 15/******/ if(installedModules[moduleId]) { 16/******/ return installedModules[moduleId].exports; 17/******/ } 18/******/ // Create a new module (and put it into the cache) 19/******/ var module = installedModules[moduleId] = { 20/******/ i: moduleId, 21/******/ l: false, 22/******/ exports: {} 23/******/ }; 24/******/ 25/******/ // Execute the module function 26/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 27/******/ 28/******/ // Flag the module as loaded 29/******/ module.l = true; 30/******/ 31/******/ // Return the exports of the module 32/******/ return module.exports; 33/******/ } 34/******/ 35/******/ 36/******/ // expose the modules object (__webpack_modules__) 37/******/ __webpack_require__.m = modules; 38/******/ 39/******/ // expose the module cache 40/******/ __webpack_require__.c = installedModules; 41/******/ 42/******/ // define getter function for harmony exports 43/******/ __webpack_require__.d = function(exports, name, getter) { 44/******/ if(!__webpack_require__.o(exports, name)) { 45/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 46/******/ } 47/******/ }; 48/******/ 49/******/ // define __esModule on exports 50/******/ __webpack_require__.r = function(exports) { 51/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 52/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 53/******/ } 54/******/ Object.defineProperty(exports, '__esModule', { value: true }); 55/******/ }; 56/******/ 57/******/ // create a fake namespace object 58/******/ // mode & 1: value is a module id, require it 59/******/ // mode & 2: merge all properties of value into the ns 60/******/ // mode & 4: return value when already ns object 61/******/ // mode & 8|1: behave like require 62/******/ __webpack_require__.t = function(value, mode) { 63/******/ if(mode & 1) value = __webpack_require__(value); 64/******/ if(mode & 8) return value; 65/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 66/******/ var ns = Object.create(null); 67/******/ __webpack_require__.r(ns); 68/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 69/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 70/******/ return ns; 71/******/ }; 72/******/ 73/******/ // getDefaultExport function for compatibility with non-harmony modules 74/******/ __webpack_require__.n = function(module) { 75/******/ var getter = module && module.__esModule ? 76/******/ function getDefault() { return module['default']; } : 77/******/ function getModuleExports() { return module; }; 78/******/ __webpack_require__.d(getter, 'a', getter); 79/******/ return getter; 80/******/ }; 81/******/ 82/******/ // Object.prototype.hasOwnProperty.call 83/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 84/******/ 85/******/ // __webpack_public_path__ 86/******/ __webpack_require__.p = ""; 87/******/ 88/******/ 89/******/ // Load entry module and return exports 90/******/ return __webpack_require__(__webpack_require__.s = 11); 91/******/ }) 92/************************************************************************/ 93/******/ ([ 94/* 0 */, 95/* 1 */, 96/* 2 */ 97/***/ (function(module, exports, __webpack_require__) { 98 99"use strict"; 100 101 102module.exports = function (callback) { 103 104 if (document.readyState === 'complete' || document.readyState === 'interactive') { 105 // Already ready or interactive, execute callback 106 callback.call(); 107 } else if (document.attachEvent) { 108 // Old browsers 109 document.attachEvent('onreadystatechange', function () { 110 if (document.readyState === 'interactive') callback.call(); 111 }); 112 } else if (document.addEventListener) { 113 // Modern browsers 114 document.addEventListener('DOMContentLoaded', callback); 115 } 116}; 117 118/***/ }), 119/* 3 */, 120/* 4 */ 121/***/ (function(module, exports, __webpack_require__) { 122 123"use strict"; 124/* WEBPACK VAR INJECTION */(function(global) { 125 126var win; 127 128if (typeof window !== "undefined") { 129 win = window; 130} else if (typeof global !== "undefined") { 131 win = global; 132} else if (typeof self !== "undefined") { 133 win = self; 134} else { 135 win = {}; 136} 137 138module.exports = win; 139/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(5))) 140 141/***/ }), 142/* 5 */ 143/***/ (function(module, exports, __webpack_require__) { 144 145"use strict"; 146 147 148var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 149 150var g; 151 152// This works in non-strict mode 153g = function () { 154 return this; 155}(); 156 157try { 158 // This works if eval is allowed (see CSP) 159 g = g || Function("return this")() || (1, eval)("this"); 160} catch (e) { 161 // This works if the window reference is available 162 if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window; 163} 164 165// g can still be undefined, but nothing to do about it... 166// We return undefined, instead of nothing here, so it's 167// easier to handle this case. if(!global) { ...} 168 169module.exports = g; 170 171/***/ }), 172/* 6 */, 173/* 7 */, 174/* 8 */, 175/* 9 */, 176/* 10 */, 177/* 11 */ 178/***/ (function(module, exports, __webpack_require__) { 179 180module.exports = __webpack_require__(12); 181 182 183/***/ }), 184/* 12 */ 185/***/ (function(module, exports, __webpack_require__) { 186 187"use strict"; 188 189 190var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 191 192var _liteReady = __webpack_require__(2); 193 194var _liteReady2 = _interopRequireDefault(_liteReady); 195 196var _global = __webpack_require__(4); 197 198var _jarallax = __webpack_require__(13); 199 200var _jarallax2 = _interopRequireDefault(_jarallax); 201 202function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 203 204// no conflict 205var oldPlugin = _global.window.jarallax; 206_global.window.jarallax = _jarallax2.default; 207_global.window.jarallax.noConflict = function () { 208 _global.window.jarallax = oldPlugin; 209 return this; 210}; 211 212// jQuery support 213if (typeof _global.jQuery !== 'undefined') { 214 var jQueryPlugin = function jQueryPlugin() { 215 var args = arguments || []; 216 Array.prototype.unshift.call(args, this); 217 var res = _jarallax2.default.apply(_global.window, args); 218 return (typeof res === 'undefined' ? 'undefined' : _typeof(res)) !== 'object' ? res : this; 219 }; 220 jQueryPlugin.constructor = _jarallax2.default.constructor; 221 222 // no conflict 223 var oldJqPlugin = _global.jQuery.fn.jarallax; 224 _global.jQuery.fn.jarallax = jQueryPlugin; 225 _global.jQuery.fn.jarallax.noConflict = function () { 226 _global.jQuery.fn.jarallax = oldJqPlugin; 227 return this; 228 }; 229} 230 231// data-jarallax initialization 232(0, _liteReady2.default)(function () { 233 (0, _jarallax2.default)(document.querySelectorAll('[data-jarallax]')); 234}); 235 236/***/ }), 237/* 13 */ 238/***/ (function(module, exports, __webpack_require__) { 239 240"use strict"; 241/* WEBPACK VAR INJECTION */(function(global) { 242 243Object.defineProperty(exports, "__esModule", { 244 value: true 245}); 246 247var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); }
247 else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 248 249var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 250 251var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 252 253var _liteReady = __webpack_require__(2); 254 255var _liteReady2 = _interopRequireDefault(_liteReady); 256 257var _rafl = __webpack_require__(14); 258 259var _rafl2 = _interopRequireDefault(_rafl); 260 261var _global = __webpack_require__(4); 262 263function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 264 265function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 266 267var isIE = navigator.userAgent.indexOf('MSIE ') > -1 || navigator.userAgent.indexOf('Trident/') > -1 || navigator.userAgent.indexOf('Edge/') > -1; 268 269var supportTransform = function () { 270 var prefixes = 'transform WebkitTransform MozTransform'.split(' '); 271 var div = document.createElement('div'); 272 for (var i = 0; i < prefixes.length; i++) { 273 if (div && div.style[prefixes[i]] !== undefined) { 274 return prefixes[i]; 275 } 276 } 277 return false; 278}(); 279 280// Window data 281var wndW = void 0; 282var wndH = void 0; 283var wndY = void 0; 284var forceResizeParallax = false; 285var forceScrollParallax = false; 286function updateWndVars(e) { 287 wndW = _global.window.innerWidth || document.documentElement.clientWidth; 288 wndH = _global.window.innerHeight || document.documentElement.clientHeight; 289 if ((typeof e === 'undefined' ? 'undefined' : _typeof(e)) === 'object' && (e.type === 'load' || e.type === 'dom-loaded')) { 290 forceResizeParallax = true; 291 } 292} 293updateWndVars(); 294_global.window.addEventListener('resize', updateWndVars); 295_global.window.addEventListener('orientationchange', updateWndVars); 296_global.window.addEventListener('load', updateWndVars); 297(0, _liteReady2.default)(function () { 298 updateWndVars({ 299 type: 'dom-loaded' 300 }); 301}); 302 303// list with all jarallax instances 304// need to render all in one scroll/resize event 305var jarallaxList = []; 306 307// Animate if changed window size or scrolled page 308var oldPageData = false; 309function updateParallax() { 310 if (!jarallaxList.length) { 311 return; 312 } 313 314 if (_global.window.pageYOffset !== undefined) { 315 wndY = _global.window.pageYOffset; 316 } else { 317 wndY = (document.documentElement || document.body.parentNode || document.body).scrollTop; 318 } 319 320 var isResized = forceResizeParallax || !oldPageData || oldPageData.width !== wndW || oldPageData.height !== wndH; 321 var isScrolled = forceScrollParallax || isResized || !oldPageData || oldPageData.y !== wndY; 322 323 forceResizeParallax = false; 324 forceScrollParallax = false; 325 326 if (isResized || isScrolled) { 327 jarallaxList.forEach(function (item) { 328 if (isResized) { 329 item.onResize(); 330 } 331 if (isScrolled) { 332 item.onScroll(); 333 } 334 }); 335 336 oldPageData = { 337 width: wndW, 338 height: wndH, 339 y: wndY 340 }; 341 } 342 343 (0, _rafl2.default)(updateParallax); 344} 345 346// ResizeObserver 347var resizeObserver = global.ResizeObserver ? new global.ResizeObserver(function (entry) { 348 if (entry && entry.length) { 349 (0, _rafl2.default)(function () { 350 entry.forEach(function (item) { 351 if (item.target && item.target.jarallax) { 352 if (!forceResizeParallax) { 353 item.target.jarallax.onResize(); 354 } 355 forceScrollParallax = true; 356 } 357 }); 358 }); 359 } 360}) : false;
361 362var instanceID = 0; 363 364// Jarallax class 365 366var Jarallax = function () { 367 function Jarallax(item, userOptions) { 368 _classCallCheck(this, Jarallax); 369 370 var self = this; 371 372 self.instanceID = instanceID++; 373 374 self.$item = item; 375 376 self.defaults = { 377 type: 'scroll', // type of parallax: scroll, scale, opacity, scale-opacity, scroll-opacity 378 speed: 0.5, // supported value from -1 to 2 379 imgSrc: null, 380 imgElement: '.jarallax-img', 381 imgSize: 'cover', 382 imgPosition: '50% 50%', 383 imgRepeat: 'no-repeat', // supported only for background, not for <img> tag 384 keepImg: false, // keep <img> tag in it's default place 385 elementInViewport: null, 386 zIndex: -100, 387 disableParallax: false, 388 disableVideo: false, 389 automaticResize: true, // use ResizeObserver to recalculate position and size of parallax image 390 391 // video 392 videoSrc: null, 393 videoStartTime: 0, 394 videoEndTime: 0, 395 videoVolume: 0, 396 videoLoop: true, 397 videoPlayOnlyVisible: true, 398 399 // events 400 onScroll: null, // function(calculations) {} 401 onInit: null, // function() {} 402 onDestroy: null, // function() {} 403 onCoverImage: null // function() {} 404 }; 405 406 // DEPRECATED: old data-options 407 var deprecatedDataAttribute = self.$item.getAttribute('data-jarallax'); 408 var oldDataOptions = JSON.parse(deprecatedDataAttribute || '{}'); 409 if (deprecatedDataAttribute) { 410 // eslint-disable-next-line no-console 411 console.warn('Detected usage of deprecated data-jarallax JSON options, you should use pure data-attribute options. See info here - https://github.com/nk-o/jarallax/issues/53'); 412 } 413 414 // prepare data-options 415 var dataOptions = self.$item.dataset || {}; 416 var pureDataOptions = {}; 417 Object.keys(dataOptions).forEach(function (key) { 418 var loweCaseOption = key.substr(0, 1).toLowerCase() + key.substr(1); 419 if (loweCaseOption && typeof self.defaults[loweCaseOption] !== 'undefined') { 420 pureDataOptions[loweCaseOption] = dataOptions[key]; 421 } 422 }); 423 424 self.options = self.extend({}, self.defaults, oldDataOptions, pureDataOptions, userOptions); 425 self.pureOptions = self.extend({}, self.options); 426 427 // prepare 'true' and 'false' strings to boolean 428 Object.keys(self.options).forEach(function (key) { 429 if (self.options[key] === 'true') { 430 self.options[key] = true; 431 } else if (self.options[key] === 'false') { 432 self.options[key] = false; 433 } 434 }); 435 436 // fix speed option [-1.0, 2.0] 437 self.options.speed = Math.min(2, Math.max(-1, parseFloat(self.options.speed))); 438 439 // deprecated noAndroid and noIos options 440 if (self.options.noAndroid || self.options.noIos) { 441 // eslint-disable-next-line no-console 442 console.warn('Detected usage of deprecated noAndroid or noIos options, you should use disableParallax option. See info here - https://github.com/nk-o/jarallax/#disable-on-mobile-devices'); 443 444 // prepare fallback if disableParallax option is not used 445 if (!self.options.disableParallax) { 446 if (self.options.noIos && self.options.noAndroid) { 447 self.options.disableParallax = /iPad|iPhone|iPod|Android/; 448 } else if (self.options.noIos) { 449 self.options.disableParallax = /iPad|iPhone|iPod/; 450 } else if (self.options.noAndroid) { 451 self.options.disableParallax = /Android/; 452 } 453 } 454 } 455 456 // prepare disableParallax callback 457 if (typeof self.options.disableParallax === 'string') { 458 self.options.disableParallax = new RegExp(self.options.disableParallax); 459 } 460 if (self.options.disableParallax instanceof RegExp) { 461 var disableParallaxRegexp = self.options.disableParallax; 462 self.options.disableParallax = function () { 463 return disableParallaxRegexp.test(navigator.userAgent); 464 }; 465 } 466 if (typeof self.options.disableParallax !== 'function') { 467 self.options.disableParallax = function () { 468 return false;
469 }; 470 } 471 472 // prepare disableVideo callback 473 if (typeof self.options.disableVideo === 'string') { 474 self.options.disableVideo = new RegExp(self.options.disableVideo); 475 } 476 if (self.options.disableVideo instanceof RegExp) { 477 var disableVideoRegexp = self.options.disableVideo; 478 self.options.disableVideo = function () { 479 return disableVideoRegexp.test(navigator.userAgent); 480 }; 481 } 482 if (typeof self.options.disableVideo !== 'function') { 483 self.options.disableVideo = function () { 484 return false; 485 }; 486 } 487 488 // custom element to check if parallax in viewport 489 var elementInVP = self.options.elementInViewport; 490 // get first item from array 491 if (elementInVP && (typeof elementInVP === 'undefined' ? 'undefined' : _typeof(elementInVP)) === 'object' && typeof elementInVP.length !== 'undefined') { 492 var _elementInVP = elementInVP; 493 494 var _elementInVP2 = _slicedToArray(_elementInVP, 1); 495 496 elementInVP = _elementInVP2[0]; 497 } 498 // check if dom element 499 if (!(elementInVP instanceof Element)) { 500 elementInVP = null; 501 } 502 self.options.elementInViewport = elementInVP; 503 504 self.image = { 505 src: self.options.imgSrc || null, 506 $container: null, 507 useImgTag: false, 508 509 // position fixed is needed for the most of browsers because absolute position have glitches 510 // on MacOS with smooth scroll there is a huge lags with absolute position - https://github.com/nk-o/jarallax/issues/75 511 // on mobile devices better scrolled with absolute position 512 position: /iPad|iPhone|iPod|Android/.test(navigator.userAgent) ? 'absolute' : 'fixed' 513 }; 514 515 if (self.initImg() && self.canInitParallax()) { 516 self.init(); 517 } 518 } 519 520 // add styles to element 521 522 523 _createClass(Jarallax, [{ 524 key: 'css', 525 value: function css(el, styles) { 526 if (typeof styles === 'string') { 527 return _global.window.getComputedStyle(el).getPropertyValue(styles); 528 } 529 530 // add transform property with vendor prefix 531 if (styles.transform && supportTransform) { 532 styles[supportTransform] = styles.transform; 533 } 534 535 Object.keys(styles).forEach(function (key) { 536 el.style[key] = styles[key]; 537 }); 538 return el; 539 } 540 541 // Extend like jQuery.extend 542 543 }, { 544 key: 'extend', 545 value: function extend(out) { 546 var _arguments = arguments; 547 548 out = out || {}; 549 Object.keys(arguments).forEach(function (i) { 550 if (!_arguments[i]) { 551 return; 552 } 553 Object.keys(_arguments[i]).forEach(function (key) { 554 out[key] = _arguments[i][key]; 555 }); 556 }); 557 return out; 558 } 559 560 // get window size and scroll position. Useful for extensions 561 562 }, { 563 key: 'getWindowData', 564 value: function getWindowData() { 565 return { 566 width: wndW, 567 height: wndH, 568 y: wndY 569 }; 570 } 571 572 // Jarallax functions 573 574 }, { 575 key: 'initImg', 576 value: function initImg() { 577 var self = this; 578 579 // find image element 580 var $imgElement = self.options.imgElement; 581 if ($imgElement && typeof $imgElement === 'string') { 582 $imgElement = self.$item.querySelector($imgElement); 583 } 584 // check if dom element 585 if (!($imgElement instanceof Element)) { 586 $imgElement = null; 587 } 588 589 if ($imgElement) { 590 if (self.options.keepImg) { 591 self.image.$item = $imgElement.cloneNode(true); 592 } else { 593 self.image.$item = $imgElement; 594 self.image.$itemParent = $imgElement.parentNode; 595 } 596 self.image.useImgTag = true; 597 } 598 599 // true if there is img tag 600 if (self.image.$item) { 601 return true; 602 } 603 604 // get image src 605 if (self.image.src === null) { 606 self.image.src = self.css(self.$item, 'background-image').replace(/^url\(['"]?/g, '').replace(/['"]?\)$/g, ''); 607 } 608 return !(!self.image.src || self.image.src === 'none'); 609 } 610 }, {
611 key: 'canInitParallax', 612 value: function canInitParallax() { 613 return supportTransform && !this.options.disableParallax(); 614 } 615 }, { 616 key: 'init', 617 value: function init() { 618 var self = this; 619 var containerStyles = { 620 position: 'absolute', 621 top: 0, 622 left: 0, 623 width: '100%', 624 height: '100%', 625 overflow: 'hidden', 626 pointerEvents: 'none' 627 }; 628 var imageStyles = {}; 629 630 if (!self.options.keepImg) { 631 // save default user styles 632 var curStyle = self.$item.getAttribute('style'); 633 if (curStyle) { 634 self.$item.setAttribute('data-jarallax-original-styles', curStyle); 635 } 636 if (self.image.useImgTag) { 637 var curImgStyle = self.image.$item.getAttribute('style'); 638 if (curImgStyle) { 639 self.image.$item.setAttribute('data-jarallax-original-styles', curImgStyle); 640 } 641 } 642 } 643 644 // set relative position and z-index to the parent 645 if (self.css(self.$item, 'position') === 'static') { 646 self.css(self.$item, { 647 position: 'relative' 648 }); 649 } 650 if (self.css(self.$item, 'z-index') === 'auto') { 651 self.css(self.$item, { 652 zIndex: 0 653 }); 654 } 655 656 // container for parallax image 657 self.image.$container = document.createElement('div'); 658 self.css(self.image.$container, containerStyles); 659 self.css(self.image.$container, { 660 'z-index': self.options.zIndex 661 }); 662 663 // fix for IE https://github.com/nk-o/jarallax/issues/110 664 if (isIE) { 665 self.css(self.image.$container, { 666 opacity: 0.9999 667 }); 668 } 669 670 self.image.$container.setAttribute('id', 'jarallax-container-' + self.instanceID); 671 self.$item.appendChild(self.image.$container); 672 673 // use img tag 674 if (self.image.useImgTag) { 675 imageStyles = self.extend({ 676 'object-fit': self.options.imgSize, 677 'object-position': self.options.imgPosition, 678 // support for plugin https://github.com/bfred-it/object-fit-images 679 'font-family': 'object-fit: ' + self.options.imgSize + '; object-position: ' + self.options.imgPosition + ';', 680 'max-width': 'none' 681 }, containerStyles, imageStyles); 682 683 // use div with background image 684 } else { 685 self.image.$item = document.createElement('div'); 686 if (self.image.src) { 687 imageStyles = self.extend({ 688 'background-position': self.options.imgPosition, 689 'background-size': self.options.imgSize, 690 'background-repeat': self.options.imgRepeat, 691 'background-image': 'url("' + self.image.src + '")' 692 }, containerStyles, imageStyles); 693 } 694 } 695 696 if (self.options.type === 'opacity' || self.options.type === 'scale' || self.options.type === 'scale-opacity' || self.options.speed === 1) { 697 self.image.position = 'absolute'; 698 } 699 700 // check if one of parents have transform style (without this check, scroll transform will be inverted if used parallax with position fixed) 701 // discussion - https://github.com/nk-o/jarallax/issues/9 702 if (self.image.position === 'fixed') { 703 var parentWithTransform = 0; 704 var $itemParents = self.$item; 705 while ($itemParents !== null && $itemParents !== document && parentWithTransform === 0) { 706 var parentTransform = self.css($itemParents, '-webkit-transform') || self.css($itemParents, '-moz-transform') || self.css($itemParents, 'transform'); 707 if (parentTransform && parentTransform !== 'none') { 708 parentWithTransform = 1; 709 self.image.position = 'absolute'; 710 } 711 $itemParents = $itemParents.parentNode; 712 } 713 } 714 715 // add position to parallax block 716 imageStyles.position = self.image.position; 717 718 // insert parallax image 719 self.css(self.image.$item, imageStyles); 720 self.image.$container.appendChild(self.image.$item); 721 722 // set initial position and size 723 self.onResize(); 724 self.onScroll(true); 725 726 // ResizeObserver 727 if (self.options.automaticResize && resizeObserver) { 728 resizeObserver.observe(self.$item); 729 } 730 731 // call onInit event 732 if (self.options.onInit) { 733 self.options.onInit.call(self); 734 } 735 736 // remove default user background 737 if (self.css(self.$item, 'background-image') !== 'none') { 738 self.css(self.$item, { 739 'background-image': 'none' 740 }); 741 } 742 743 self.addToParallaxList(); 744 } 745 746 // add to parallax instances list 747 748 }, {
749 key: 'addToParallaxList', 750 value: function addToParallaxList() { 751 jarallaxList.push(this); 752 753 if (jarallaxList.length === 1) { 754 updateParallax(); 755 } 756 } 757 758 // remove from parallax instances list 759 760 }, { 761 key: 'removeFromParallaxList', 762 value: function removeFromParallaxList() { 763 var self = this; 764 765 jarallaxList.forEach(function (item, key) { 766 if (item.instanceID === self.instanceID) { 767 jarallaxList.splice(key, 1); 768 } 769 }); 770 } 771 }, { 772 key: 'destroy', 773 value: function destroy() { 774 var self = this; 775 776 self.removeFromParallaxList(); 777 778 // return styles on container as before jarallax init 779 var originalStylesTag = self.$item.getAttribute('data-jarallax-original-styles'); 780 self.$item.removeAttribute('data-jarallax-original-styles'); 781 // null occurs if there is no style tag before jarallax init 782 if (!originalStylesTag) { 783 self.$item.removeAttribute('style'); 784 } else { 785 self.$item.setAttribute('style', originalStylesTag); 786 } 787 788 if (self.image.useImgTag) { 789 // return styles on img tag as before jarallax init 790 var originalStylesImgTag = self.image.$item.getAttribute('data-jarallax-original-styles'); 791 self.image.$item.removeAttribute('data-jarallax-original-styles'); 792 // null occurs if there is no style tag before jarallax init 793 if (!originalStylesImgTag) { 794 self.image.$item.removeAttribute('style'); 795 } else { 796 self.image.$item.setAttribute('style', originalStylesTag); 797 } 798 799 // move img tag to its default position 800 if (self.image.$itemParent) { 801 self.image.$itemParent.appendChild(self.image.$item); 802 } 803 } 804 805 // remove additional dom elements 806 if (self.$clipStyles) { 807 self.$clipStyles.parentNode.removeChild(self.$clipStyles); 808 } 809 if (self.image.$container) { 810 self.image.$container.parentNode.removeChild(self.image.$container); 811 } 812 813 // call onDestroy event 814 if (self.options.onDestroy) { 815 self.options.onDestroy.call(self); 816 } 817 818 // delete jarallax from item 819 delete self.$item.jarallax; 820 } 821 822 // it will remove some image overlapping 823 // overlapping occur due to an image position fixed inside absolute position element 824 825 }, { 826 key: 'clipContainer', 827 value: function clipContainer() { 828 // needed only when background in fixed position 829 if (this.image.position !== 'fixed') { 830 return; 831 } 832 833 var self = this; 834 var rect = self.image.$container.getBoundingClientRect(); 835 var width = rect.width, 836 height = rect.height; 837 838 839 if (!self.$clipStyles) { 840 self.$clipStyles = document.createElement('style'); 841 self.$clipStyles.setAttribute('type', 'text/css'); 842 self.$clipStyles.setAttribute('id', 'jarallax-clip-' + self.instanceID); 843 var head = document.head || document.getElementsByTagName('head')[0]; 844 head.appendChild(self.$clipStyles); 845 } 846 847 var styles = '#jarallax-container-' + self.instanceID + ' {\n clip: rect(0 ' + width + 'px ' + height + 'px 0);\n clip: rect(0, ' + width + 'px, ' + height + 'px, 0);\n }'; 848 849 // add clip styles inline (this method need for support IE8 and less browsers) 850 if (self.$clipStyles.styleSheet) { 851 self.$clipStyles.styleSheet.cssText = styles; 852 } else { 853 self.$clipStyles.innerHTML = styles; 854 } 855 } 856 }, {
857 key: 'coverImage', 858 value: function coverImage() { 859 var self = this; 860 861 var rect = self.image.$container.getBoundingClientRect(); 862 var contH = rect.height; 863 var speed = self.options.speed; 864 865 var isScroll = self.options.type === 'scroll' || self.options.type === 'scroll-opacity'; 866 var scrollDist = 0; 867 var resultH = contH; 868 var resultMT = 0; 869 870 // scroll parallax 871 if (isScroll) { 872 // scroll distance and height for image 873 if (speed < 0) { 874 scrollDist = speed * Math.max(contH, wndH); 875 876 if (wndH < contH) { 877 scrollDist -= speed * (contH - wndH); 878 } 879 } else { 880 scrollDist = speed * (contH + wndH); 881 } 882 883 // size for scroll parallax 884 if (speed > 1) { 885 resultH = Math.abs(scrollDist - wndH); 886 } else if (speed < 0) { 887 resultH = scrollDist / speed + Math.abs(scrollDist); 888 } else { 889 resultH += (wndH - contH) * (1 - speed); 890 } 891 892 scrollDist /= 2; 893 } 894 895 // store scroll distance 896 self.parallaxScrollDistance = scrollDist; 897 898 // vertical center 899 if (isScroll) { 900 resultMT = (wndH - resultH) / 2; 901 } else { 902 resultMT = (contH - resultH) / 2; 903 } 904 905 // apply result to item 906 self.css(self.image.$item, { 907 height: resultH + 'px', 908 marginTop: resultMT + 'px', 909 left: self.image.position === 'fixed' ? rect.left + 'px' : '0', 910 width: rect.width + 'px' 911 }); 912 913 // call onCoverImage event 914 if (self.options.onCoverImage) { 915 self.options.onCoverImage.call(self); 916 } 917 918 // return some useful data. Used in the video cover function 919 return { 920 image: { 921 height: resultH, 922 marginTop: resultMT 923 }, 924 container: rect 925 }; 926 } 927 }, { 928 key: 'isVisible', 929 value: function isVisible() { 930 return this.isElementInViewport || false; 931 } 932 }, { 933 key: 'onScroll', 934 value: function onScroll(force) { 935 var self = this; 936 937 var rect = self.$item.getBoundingClientRect(); 938 var contT = rect.top; 939 var contH = rect.height; 940 var styles = {}; 941 942 // check if in viewport 943 var viewportRect = rect; 944 if (self.options.elementInViewport) { 945 viewportRect = self.options.elementInViewport.getBoundingClientRect(); 946 } 947 self.isElementInViewport = viewportRect.bottom >= 0 && viewportRect.right >= 0 && viewportRect.top <= wndH && viewportRect.left <= wndW; 948 949 // stop calculations if item is not in viewport 950 if (force ? false : !self.isElementInViewport) { 951 return; 952 } 953 954 // calculate parallax helping variables 955 var beforeTop = Math.max(0, contT); 956 var beforeTopEnd = Math.max(0, contH + contT); 957 var afterTop = Math.max(0, -contT); 958 var beforeBottom = Math.max(0, contT + contH - wndH); 959 var beforeBottomEnd = Math.max(0, contH - (contT + contH - wndH)); 960 var afterBottom = Math.max(0, -contT + wndH - contH); 961 var fromViewportCenter = 1 - 2 * (wndH - contT) / (wndH + contH); 962 963 // calculate on how percent of section is visible 964 var visiblePercent = 1; 965 if (contH < wndH) { 966 visiblePercent = 1 - (afterTop || beforeBottom) / contH; 967 } else if (beforeTopEnd <= wndH) { 968 visiblePercent = beforeTopEnd / wndH; 969 } else if (beforeBottomEnd <= wndH) { 970 visiblePercent = beforeBottomEnd / wndH; 971 } 972 973 // opacity 974 if (self.options.type === 'opacity' || self.options.type === 'scale-opacity' || self.options.type === 'scroll-opacity') {
975 styles.transform = 'translate3d(0,0,0)'; 976 styles.opacity = visiblePercent; 977 } 978 979 // scale 980 if (self.options.type === 'scale' || self.options.type === 'scale-opacity') { 981 var scale = 1; 982 if (self.options.speed < 0) { 983 scale -= self.options.speed * visiblePercent; 984 } else { 985 scale += self.options.speed * (1 - visiblePercent); 986 } 987 styles.transform = 'scale(' + scale + ') translate3d(0,0,0)'; 988 } 989 990 // scroll 991 if (self.options.type === 'scroll' || self.options.type === 'scroll-opacity') { 992 var positionY = self.parallaxScrollDistance * fromViewportCenter; 993 994 // fix if parallax block in absolute position 995 if (self.image.position === 'absolute') { 996 positionY -= contT; 997 } 998 999 styles.transform = 'translate3d(0,' + positionY + 'px,0)'; 1000 } 1001 1002 self.css(self.image.$item, styles); 1003 1004 // call onScroll event 1005 if (self.options.onScroll) { 1006 self.options.onScroll.call(self, { 1007 section: rect, 1008 1009 beforeTop: beforeTop, 1010 beforeTopEnd: beforeTopEnd, 1011 afterTop: afterTop, 1012 beforeBottom: beforeBottom, 1013 beforeBottomEnd: beforeBottomEnd, 1014 afterBottom: afterBottom, 1015 1016 visiblePercent: visiblePercent, 1017 fromViewportCenter: fromViewportCenter 1018 }); 1019 } 1020 } 1021 }, { 1022 key: 'onResize', 1023 value: function onResize() { 1024 this.coverImage(); 1025 this.clipContainer(); 1026 } 1027 }]); 1028 1029 return Jarallax; 1030}(); 1031 1032// global definition 1033 1034 1035var plugin = function plugin(items) { 1036 // check for dom element 1037 // thanks: http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object 1038 if ((typeof HTMLElement === 'undefined' ? 'undefined' : _typeof(HTMLElement)) === 'object' ? items instanceof HTMLElement : items && (typeof items === 'undefined' ? 'undefined' : _typeof(items)) === 'object' && items !== null && items.nodeType === 1 && typeof items.nodeName === 'string') { 1039 items = [items]; 1040 } 1041 1042 var options = arguments[1]; 1043 var args = Array.prototype.slice.call(arguments, 2); 1044 var len = items.length; 1045 var k = 0; 1046 var ret = void 0; 1047 1048 for (k; k < len; k++) { 1049 if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object' || typeof options === 'undefined') { 1050 if (!items[k].jarallax) { 1051 items[k].jarallax = new Jarallax(items[k], options); 1052 } 1053 } else if (items[k].jarallax) { 1054 // eslint-disable-next-line prefer-spread 1055 ret = items[k].jarallax[options].apply(items[k].jarallax, args); 1056 } 1057 if (typeof ret !== 'undefined') { 1058 return ret; 1059 } 1060 } 1061 1062 return items; 1063}; 1064plugin.constructor = Jarallax; 1065 1066exports.default = plugin; 1067/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(5))) 1068 1069/***/ }), 1070/* 14 */ 1071/***/ (function(module, exports, __webpack_require__) { 1072 1073"use strict"; 1074 1075 1076var global = __webpack_require__(4); 1077 1078/** 1079 * `requestAnimationFrame()` 1080 */ 1081 1082var request = global.requestAnimationFrame || global.webkitRequestAnimationFrame || global.mozRequestAnimationFrame || fallback; 1083 1084var prev = +new Date(); 1085function fallback(fn) { 1086 var curr = +new Date(); 1087 var ms = Math.max(0, 16 - (curr - prev)); 1088 var req = setTimeout(fn, ms); 1089 return prev = curr, req; 1090} 1091 1092/** 1093 * `cancelAnimationFrame()` 1094 */ 1095 1096var cancel = global.cancelAnimationFrame || global.webkitCancelAnimationFrame || global.mozCancelAnimationFrame || clearTimeout; 1097 1098if (Function.prototype.bind) { 1099 request = request.bind(global); 1100 cancel = cancel.bind(global); 1101} 1102 1103exports = module.exports = request; 1104exports.cancel = cancel; 1105 1106/***/ }) 1107/******/ ]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.