vendor: 4,768 bytes, lines 1-134
1/*! 2 * Name : Just Another Parallax [Jarallax] 3 * Version : 1.12.5 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 = 10); 91/******/ }) 92/************************************************************************/ 93/******/ ([ 94/* 0 */, 95/* 1 */, 96/* 2 */ 97/***/ (function(module, exports) { 98 99module.exports = function (callback) { 100 if (document.readyState === 'complete' || document.readyState === 'interactive') { 101 // Already ready or interactive, execute callback 102 callback.call(); 103 } else if (document.attachEvent) { 104 // Old browsers 105 document.attachEvent('onreadystatechange', function () { 106 if (document.readyState === 'interactive') callback.call(); 107 }); 108 } else if (document.addEventListener) { 109 // Modern browsers 110 document.addEventListener('DOMContentLoaded', callback); 111 } 112}; 113 114/***/ }), 115/* 3 */ 116/***/ (function(module, exports, __webpack_require__) { 117 118/* WEBPACK VAR INJECTION */(function(global) {var win; 119 120if (typeof window !== "undefined") { 121 win = window; 122} else if (typeof global !== "undefined") { 123 win = global; 124} else if (typeof self !== "undefined") { 125 win = self; 126} else { 127 win = {}; 128} 129 130module.exports = win; 131/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(4))) 132 133/***/ }), 134/* 4 */
135/***/ (function(module, exports) { 136 137function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 138 139var g; // This works in non-strict mode 140 141g = function () { 142 return this; 143}(); 144 145try { 146 // This works if eval is allowed (see CSP) 147 g = g || new Function("return this")(); 148} catch (e) { 149 // This works if the window reference is available 150 if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window; 151} // g can still be undefined, but nothing to do about it... 152// We return undefined, instead of nothing here, so it's 153// easier to handle this case. if(!global) { ...} 154 155 156module.exports = g; 157 158/***/ }), 159/* 5 */, 160/* 6 */, 161/* 7 */, 162/* 8 */, 163/* 9 */, 164/* 10 */ 165/***/ (function(module, exports, __webpack_require__) { 166 167module.exports = __webpack_require__(11); 168 169 170/***/ }), 171/* 11 */ 172/***/ (function(module, __webpack_exports__, __webpack_require__) { 173 174"use strict"; 175__webpack_require__.r(__webpack_exports__); 176/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2); 177/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lite_ready__WEBPACK_IMPORTED_MODULE_0__); 178/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3); 179/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(global__WEBPACK_IMPORTED_MODULE_1__); 180/* harmony import */ var _jarallax_esm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12); 181function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 182 183 184 185 // no conflict 186 187var oldPlugin = global__WEBPACK_IMPORTED_MODULE_1__["window"].jarallax; 188global__WEBPACK_IMPORTED_MODULE_1__["window"].jarallax = _jarallax_esm__WEBPACK_IMPORTED_MODULE_2__["default"]; 189 190global__WEBPACK_IMPORTED_MODULE_1__["window"].jarallax.noConflict = function () { 191 global__WEBPACK_IMPORTED_MODULE_1__["window"].jarallax = oldPlugin; 192 return this; 193}; // jQuery support 194 195 196if ('undefined' !== typeof global__WEBPACK_IMPORTED_MODULE_1__["jQuery"]) { 197 var jQueryPlugin = function jQueryPlugin() { 198 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 199 args[_key] = arguments[_key]; 200 } 201 202 Array.prototype.unshift.call(args, this); 203 var res = _jarallax_esm__WEBPACK_IMPORTED_MODULE_2__["default"].apply(global__WEBPACK_IMPORTED_MODULE_1__["window"], args); 204 return 'object' !== _typeof(res) ? res : this; 205 }; 206 207 jQueryPlugin.constructor = _jarallax_esm__WEBPACK_IMPORTED_MODULE_2__["default"].constructor; // no conflict 208 209 var oldJqPlugin = global__WEBPACK_IMPORTED_MODULE_1__["jQuery"].fn.jarallax; 210 global__WEBPACK_IMPORTED_MODULE_1__["jQuery"].fn.jarallax = jQueryPlugin; 211 212 global__WEBPACK_IMPORTED_MODULE_1__["jQuery"].fn.jarallax.noConflict = function () { 213 global__WEBPACK_IMPORTED_MODULE_1__["jQuery"].fn.jarallax = oldJqPlugin; 214 return this; 215 }; 216} // data-jarallax initialization 217 218 219lite_ready__WEBPACK_IMPORTED_MODULE_0___default()(function () { 220 Object(_jarallax_esm__WEBPACK_IMPORTED_MODULE_2__["default"])(document.querySelectorAll('[data-jarallax]')); 221}); 222 223/***/ }), 224/* 12 */ 225/***/ (function(module, __webpack_exports__, __webpack_require__) { 226 227"use strict"; 228__webpack_require__.r(__webpack_exports__); 229/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2); 230/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lite_ready__WEBPACK_IMPORTED_MODULE_0__); 231/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3); 232/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(global__WEBPACK_IMPORTED_MODULE_1__); 233function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } 234 235function _nonIterableRest() { throw new TypeError("Invalid attempt to de
235structure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 236 237function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } 238 239function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } 240 241function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; 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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } 242 243function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } 244 245function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 246 247function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 248 249function _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); } } 250 251function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 252 253 254 255var navigator = global__WEBPACK_IMPORTED_MODULE_1__["window"].navigator; 256var isIE = -1 < navigator.userAgent.indexOf('MSIE ') || -1 < navigator.userAgent.indexOf('Trident/') || -1 < navigator.userAgent.indexOf('Edge/'); 257var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 258 259var supportTransform = function () { 260 var prefixes = 'transform WebkitTransform MozTransform'.split(' '); 261 var div = document.createElement('div'); 262 263 for (var i = 0; i < prefixes.length; i += 1) { 264 if (div && div.style[prefixes[i]] !== undefined) { 265 return prefixes[i]; 266 } 267 } 268 269 return false; 270}(); 271 272var $deviceHelper; 273/** 274 * The most popular mobile browsers changes height after page scroll and this generates image jumping. 275 * We can fix it using this workaround with vh units. 276 */ 277 278function getDeviceHeight() { 279 if (!$deviceHelper && document.body) { 280 $deviceHelper = document.createElement('div'); 281 $deviceHelper.style.cssText = 'position: fixed; top: -9999px; left: 0; height: 100vh; width: 0;'; 282 document.body.appendChild($deviceHelper); 283 } 284 285 return ($deviceHelper ? $deviceHelper.clientHeight : 0) || global__WEBPACK_IMPORTED_MODULE_1__["window"].innerHeight || document.documentElement.clientHeight; 286} // Window height data 287 288 289var wndH; 290 291function updateWndVars() { 292 if (isMobile) { 293 wndH = getDeviceHeight(); 294 } else { 295 wndH = global__WEBPACK_IMPORTED_MODULE_1__["window"].innerHeight || document.documentElement.clientHeight; 296 } 297} 298 299updateWndVars(); 300global__WEBPACK_IMPORTED_MODULE_1__["window"].addEventListener('resize', updateWndVars); 301global__WEBPACK_IMPORTED_MODULE_1__["window"].addEventListener('orientationchange', updateWndVars); 302global__WEBPACK_IMPORTED_MODULE_1__["window"].addEventListener('load', updateWndVars); 303lite_ready__WEBPACK_IMPORTED_MODULE_0___default()(function () { 304 updateWndVars({ 305 type: 'dom-loaded' 306 }); 307}); // list with all jarallax instances 308// need to render all in one scroll/resize event 309 310var jarallaxList = []; // get all parents of the element. 311 312function getParents(elem) { 313 var parents = []; 314 315 while (null !== elem.parentElement) { 316 elem = elem.parentElement; 317 318 if (1 === elem.nodeType) { 319 parents.push(elem); 320 } 321 } 322 323 return parents; 324} 325 326function updateParallax() { 327 if (!jarallaxList.length) { 328 return; 329 } 330 331 jarallaxList.forEach(function (data, k) { 332 var instance = data.instance, 333 oldData = data.oldData; 334 var clientRect = instance.$item.getBoundingClientRect(); 335 var newData = { 336 width: clientRect.width, 337 height: clientRect.height, 338 top: clientRect.top, 339 bottom: clientRect.bottom, 340 wndW: global__WEBPACK_IMPORTED_MODULE_1__["window"].innerWidth, 341 wndH: wndH 342 }; 343 var isResized = !oldData || oldData.wndW !== newData.wndW || oldData.wndH !== newData.wndH || oldData.width !== newData.width || oldData.height !== newData.height; 344 var isScrolled = isResized || !oldData || oldData.top !== newData.top || oldData.bottom !== newData.bottom; 345 jarallaxList[k].oldData = newData; 346 347 if (isResized) { 348 instance.onResize(); 349 } 350 351 if (isScrolled) { 352 instance.onScroll(); 353 } 354 }); 355 global__WEBPACK_IMPORTED_MODULE_1__["window"].requestAnimationFrame(updateParallax); 356} 357 358var instanceID = 0; // Jarallax class 359 360var Jarallax = /*#__PURE__*/function () { 361 function Jarallax(item, userOptions) { 362 _classCallCheck(this, Jarallax); 363 364 var self = this; 365 self.instanceID = instanceID; 366 instanceID += 1; 367 self.$item = item; 368 self.defaults = { 369 type: 'scroll', 370 // type of parallax: scroll, scale, opacity, scale-opacity, scroll-opacity 371 speed: 0.5, 372 // supported value from -1 to 2 373 imgSrc: null, 374 imgElement: '.jarallax-img', 375 imgSize: 'cover', 376 imgPosition: '50% 50%', 377 imgRepeat: 'no-repeat', 378 // supported only for background, not for <img> tag 379 keepImg: false, 380 // keep <img> tag in it's default place 381 elementInViewport: null, 382 zIndex: -100, 383 disableParallax: false, 384 disableVideo: false, 385 // video 386 videoSrc: null, 387 videoStartTime: 0, 388 videoEndTime: 0, 389 videoVolume: 0, 390 videoLoop: true, 391 videoPlayOnlyVisible: true, 392 videoLazyLoading: true, 393 // events 394 onScroll: null, 395 // function(calculations) {} 396 onInit: null, 397 // function() {} 398 onDestroy: null, 399 // function() {} 400 onCoverImage: null // function() {} 401 402 }; // prepare data-options 403 404 var dataOptions = self.$item.dataset || {}; 405 var pureDataOptions = {};
406 Object.keys(dataOptions).forEach(function (key) { 407 var loweCaseOption = key.substr(0, 1).toLowerCase() + key.substr(1); 408 409 if (loweCaseOption && 'undefined' !== typeof self.defaults[loweCaseOption]) { 410 pureDataOptions[loweCaseOption] = dataOptions[key]; 411 } 412 }); 413 self.options = self.extend({}, self.defaults, pureDataOptions, userOptions); 414 self.pureOptions = self.extend({}, self.options); // prepare 'true' and 'false' strings to boolean 415 416 Object.keys(self.options).forEach(function (key) { 417 if ('true' === self.options[key]) { 418 self.options[key] = true; 419 } else if ('false' === self.options[key]) { 420 self.options[key] = false; 421 } 422 }); // fix speed option [-1.0, 2.0] 423 424 self.options.speed = Math.min(2, Math.max(-1, parseFloat(self.options.speed))); // prepare disableParallax callback 425 426 if ('string' === typeof self.options.disableParallax) { 427 self.options.disableParallax = new RegExp(self.options.disableParallax); 428 } 429 430 if (self.options.disableParallax instanceof RegExp) { 431 var disableParallaxRegexp = self.options.disableParallax; 432 433 self.options.disableParallax = function () { 434 return disableParallaxRegexp.test(navigator.userAgent); 435 }; 436 } 437 438 if ('function' !== typeof self.options.disableParallax) { 439 self.options.disableParallax = function () { 440 return false; 441 }; 442 } // prepare disableVideo callback 443 444 445 if ('string' === typeof self.options.disableVideo) { 446 self.options.disableVideo = new RegExp(self.options.disableVideo); 447 } 448 449 if (self.options.disableVideo instanceof RegExp) { 450 var disableVideoRegexp = self.options.disableVideo; 451 452 self.options.disableVideo = function () { 453 return disableVideoRegexp.test(navigator.userAgent); 454 }; 455 } 456 457 if ('function' !== typeof self.options.disableVideo) { 458 self.options.disableVideo = function () { 459 return false; 460 }; 461 } // custom element to check if parallax in viewport 462 463 464 var elementInVP = self.options.elementInViewport; // get first item from array 465 466 if (elementInVP && 'object' === _typeof(elementInVP) && 'undefined' !== typeof elementInVP.length) { 467 var _elementInVP = elementInVP; 468 469 var _elementInVP2 = _slicedToArray(_elementInVP, 1); 470 471 elementInVP = _elementInVP2[0]; 472 } // check if dom element 473 474 475 if (!(elementInVP instanceof Element)) { 476 elementInVP = null; 477 } 478 479 self.options.elementInViewport = elementInVP; 480 self.image = { 481 src: self.options.imgSrc || null, 482 $container: null, 483 useImgTag: false, 484 // position fixed is needed for the most of browsers because absolute position have glitches 485 // on MacOS with smooth scroll there is a huge lags with absolute position - https://github.com/nk-o/jarallax/issues/75 486 // on mobile devices better scrolled with absolute position 487 position: /iPad|iPhone|iPod|Android/.test(navigator.userAgent) ? 'absolute' : 'fixed' 488 }; 489 490 if (self.initImg() && self.canInitParallax()) { 491 self.init(); 492 } 493 } // add styles to element 494 // eslint-disable-next-line class-methods-use-this 495 496 497 _createClass(Jarallax, [{ 498 key: "css", 499 value: function css(el, styles) { 500 if ('string' === typeof styles) { 501 return global__WEBPACK_IMPORTED_MODULE_1__["window"].getComputedStyle(el).getPropertyValue(styles); 502 } // add transform property with vendor prefix 503 504 505 if (styles.transform && supportTransform) { 506 styles[supportTransform] = styles.transform; 507 } 508 509 Object.keys(styles).forEach(function (key) { 510 el.style[key] = styles[key]; 511 }); 512 return el; 513 } // Extend like jQuery.extend 514 // eslint-disable-next-line class-methods-use-this 515 516 }, { 517 key: "extend", 518 value: function extend(out) { 519 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 520 args[_key - 1] = arguments[_key]; 521 } 522 523 out = out || {}; 524 Object.keys(args).forEach(function (i) { 525 if (!args[i]) { 526 return; 527 } 528
529 Object.keys(args[i]).forEach(function (key) { 530 out[key] = args[i][key]; 531 }); 532 }); 533 return out; 534 } // get window size and scroll position. Useful for extensions 535 // eslint-disable-next-line class-methods-use-this 536 537 }, { 538 key: "getWindowData", 539 value: function getWindowData() { 540 return { 541 width: global__WEBPACK_IMPORTED_MODULE_1__["window"].innerWidth || document.documentElement.clientWidth, 542 height: wndH, 543 y: document.documentElement.scrollTop 544 }; 545 } // Jarallax functions 546 547 }, { 548 key: "initImg", 549 value: function initImg() { 550 var self = this; // find image element 551 552 var $imgElement = self.options.imgElement; 553 554 if ($imgElement && 'string' === typeof $imgElement) { 555 $imgElement = self.$item.querySelector($imgElement); 556 } // check if dom element 557 558 559 if (!($imgElement instanceof Element)) { 560 if (self.options.imgSrc) { 561 $imgElement = new Image(); 562 $imgElement.src = self.options.imgSrc; 563 } else { 564 $imgElement = null; 565 } 566 } 567 568 if ($imgElement) { 569 if (self.options.keepImg) { 570 self.image.$item = $imgElement.cloneNode(true); 571 } else { 572 self.image.$item = $imgElement; 573 self.image.$itemParent = $imgElement.parentNode; 574 } 575 576 self.image.useImgTag = true; 577 } // true if there is img tag 578 579 580 if (self.image.$item) { 581 return true; 582 } // get image src 583 584 585 if (null === self.image.src) { 586 self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; 587 self.image.bgImage = self.css(self.$item, 'background-image'); 588 } 589 590 return !(!self.image.bgImage || 'none' === self.image.bgImage); 591 } 592 }, { 593 key: "canInitParallax", 594 value: function canInitParallax() { 595 return supportTransform && !this.options.disableParallax(); 596 } 597 }, { 598 key: "init", 599 value: function init() { 600 var self = this; 601 var containerStyles = { 602 position: 'absolute', 603 top: 0, 604 left: 0, 605 width: '100%', 606 height: '100%', 607 overflow: 'hidden' 608 }; 609 var imageStyles = { 610 pointerEvents: 'none', 611 transformStyle: 'preserve-3d', 612 backfaceVisibility: 'hidden', 613 willChange: 'transform,opacity' 614 }; 615 616 if (!self.options.keepImg) { 617 // save default user styles 618 var curStyle = self.$item.getAttribute('style'); 619 620 if (curStyle) { 621 self.$item.setAttribute('data-jarallax-original-styles', curStyle); 622 } 623 624 if (self.image.useImgTag) { 625 var curImgStyle = self.image.$item.getAttribute('style'); 626 627 if (curImgStyle) { 628 self.image.$item.setAttribute('data-jarallax-original-styles', curImgStyle); 629 } 630 } 631 } // set relative position and z-index to the parent 632 633 634 if ('static' === self.css(self.$item, 'position')) { 635 self.css(self.$item, { 636 position: 'relative' 637 }); 638 } 639 640 if ('auto' === self.css(self.$item, 'z-index')) { 641 self.css(self.$item, { 642 zIndex: 0 643 }); 644 } // container for parallax image 645 646 647 self.image.$container = document.createElement('div'); 648 self.css(self.image.$container, containerStyles); 649 self.css(self.image.$container, { 650 'z-index': self.options.zIndex 651 }); // fix for IE https://github.com/nk-o/jarallax/issues/110 652 653 if (isIE) { 654 self.css(self.image.$container, { 655 opacity: 0.9999 656 }); 657 } 658 659 self.image.$container.setAttribute('id', "jarallax-container-".concat(self.instanceID)); 660 self.$item.appendChild(self.image.$container); // use img tag 661 662 if (self.image.useImgTag) { 663 imageStyles = self.extend({ 664 'object-fit': self.options.imgSize, 665 'object-position': self.options.imgPosition, 666 // support for plugin https://github.com/bfred-it/object-fit-images 667 'font-family': "object-fit: ".concat(self.options.imgSize, "; object-position: ").concat(self.options.imgPosition, ";"), 668 'max-width': 'none' 669 }, containerStyles, imageStyles); // use div with background image 670 } else { 671 self.image.$item = document.createElement('div'); 672 673 if (self.image.src) { 674 imageStyles = self.extend({ 675 'background-position': self.options.imgPosition, 676 'background-size': self.options.imgSize, 677 'background-repeat': self.options.imgRepeat, 678 'background-image': self.image.bgImage || "url(\"".concat(self.image.src, "\")") 679 }, containerStyles, imageStyles); 680 } 681 } 682 683 if ('opacity' === self.options.type || 'scale' === self.options.type || 'scale-opacity' === self.options.type || 1 === self.options.speed) { 684 self.image.position = 'absolute'; 685 } // 1. Check if one of parents have transform style (without this check, scroll transform will be inverted if used parallax with position fixed) 686 // discussion - https://github.com/nk-o/jarallax/issues/9 687 // 2. Check if parents have overflow scroll 688 689 690 if ('fixed' === self.image.position) { 691 var $parents = getParents(self.$item).filter(function (el) { 692 var styles = global__WEBPACK_IMPORTED_MODULE_1__["window"].getComputedStyle(el); 693 var parentTransform = styles['-webkit-transform'] || styles['-moz-transform'] || styles.transform; 694 var overflowRegex = /(auto|scroll)/; 695 return parentTransform && 'none' !== parentTransform || overflowRegex.test(styles.overflow + styles['overflow-y'] + styles['overflow-x']); 696 }); 697 self.image.position = $parents.length ? 'absolute' : 'fixed'; 698 } // add position to parallax block 699 700 701 imageStyles.position = self.image.position; // insert parallax image 702 703 self.css(self.image.$item, imageStyles); 704 self.image.$container.appendChild(self.image.$item); // set initial position and size 705 706 self.onResize(); 707 self.onScroll(true); // call onInit event 708 709 if (self.options.onInit) { 710 self.options.onInit.call(self); 711 } // remove default user background 712 713 714 if ('none' !== self.css(self.$item, 'background-image')) { 715 self.css(self.$item, { 716 'background-image': 'none' 717 }); 718 } 719 720 self.addToParallaxList(); 721 } // add to parallax instances list 722 723 }, { 724 key: "addToParallaxList", 725 value: function addToParallaxList() { 726 jarallaxList.push({ 727 instance: this 728 }); 729 730 if (1 === jarallaxList.length) { 731 global__WEBPACK_IMPORTED_MODULE_1__["window"].requestAnimationFrame(updateParallax); 732 } 733 } // remove from parallax instances list 734 735 }, { 736 key: "removeFromParallaxList", 737 value: function removeFromParallaxList() { 738 var self = this; 739 jarallaxList.forEach(function (data, key) { 740 if (data.instance.instanceID === self.instanceID) { 741 jarallaxList.splice(key, 1); 742 } 743 }); 744 } 745 }, {
746 key: "destroy", 747 value: function destroy() { 748 var self = this; 749 self.removeFromParallaxList(); // return styles on container as before jarallax init 750 751 var originalStylesTag = self.$item.getAttribute('data-jarallax-original-styles'); 752 self.$item.removeAttribute('data-jarallax-original-styles'); // null occurs if there is no style tag before jarallax init 753 754 if (!originalStylesTag) { 755 self.$item.removeAttribute('style'); 756 } else { 757 self.$item.setAttribute('style', originalStylesTag); 758 } 759 760 if (self.image.useImgTag) { 761 // return styles on img tag as before jarallax init 762 var originalStylesImgTag = self.image.$item.getAttribute('data-jarallax-original-styles'); 763 self.image.$item.removeAttribute('data-jarallax-original-styles'); // null occurs if there is no style tag before jarallax init 764 765 if (!originalStylesImgTag) { 766 self.image.$item.removeAttribute('style'); 767 } else { 768 self.image.$item.setAttribute('style', originalStylesTag); 769 } // move img tag to its default position 770 771 772 if (self.image.$itemParent) { 773 self.image.$itemParent.appendChild(self.image.$item); 774 } 775 } // remove additional dom elements 776 777 778 if (self.$clipStyles) { 779 self.$clipStyles.parentNode.removeChild(self.$clipStyles); 780 } 781 782 if (self.image.$container) { 783 self.image.$container.parentNode.removeChild(self.image.$container); 784 } // call onDestroy event 785 786 787 if (self.options.onDestroy) { 788 self.options.onDestroy.call(self); 789 } // delete jarallax from item 790 791 792 delete self.$item.jarallax; 793 } // it will remove some image overlapping 794 // overlapping occur due to an image position fixed inside absolute position element 795 796 }, { 797 key: "clipContainer", 798 value: function clipContainer() { 799 // needed only when background in fixed position 800 if ('fixed' !== this.image.position) { 801 return; 802 } 803 804 var self = this; 805 var rect = self.image.$container.getBoundingClientRect(); 806 var width = rect.width, 807 height = rect.height; 808 809 if (!self.$clipStyles) { 810 self.$clipStyles = document.createElement('style'); 811 self.$clipStyles.setAttribute('type', 'text/css'); 812 self.$clipStyles.setAttribute('id', "jarallax-clip-".concat(self.instanceID)); 813 var head = document.head || document.getElementsByTagName('head')[0]; 814 head.appendChild(self.$clipStyles); 815 } // clip is used for old browsers. 816 // clip-path for modern browsers (also fixes Safari v14 bug https://github.com/nk-o/jarallax/issues/181 ). 817 818 819 var styles = "#jarallax-container-".concat(self.instanceID, " {\n clip: rect(0 ").concat(width, "px ").concat(height, "px 0);\n clip: rect(0, ").concat(width, "px, ").concat(height, "px, 0);\n -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }"); // add clip styles inline (this method need for support IE8 and less browsers) 820 821 if (self.$clipStyles.styleSheet) { 822 self.$clipStyles.styleSheet.cssText = styles; 823 } else { 824 self.$clipStyles.innerHTML = styles; 825 } 826 } 827 }, { 828 key: "coverImage", 829 value: function coverImage() { 830 var self = this; 831 var rect = self.image.$container.getBoundingClientRect(); 832 var contH = rect.height; 833 var speed = self.options.speed; 834 var isScroll = 'scroll' === self.options.type || 'scroll-opacity' === self.options.type; 835 var scrollDist = 0; 836 var resultH = contH; 837 var resultMT = 0; // scroll parallax 838 839 if (isScroll) { 840 // scroll distance and height for image 841 if (0 > speed) { 842 scrollDist = speed * Math.max(contH, wndH); 843 844 if (wndH < contH) { 845 scrollDist -= speed * (contH - wndH); 846 } 847 } else { 848 scrollDist = speed * (contH + wndH); 849 } // size for scroll parallax 850 851 852 if (1 < speed) { 853 resultH = Math.abs(scrollDist - wndH); 854 } else if (0 > speed) { 855 resultH = scrollDist / speed + Math.abs(scrollDist); 856 } else { 857 resultH += (wndH - contH) * (1 - speed); 858 } 859 860 scrollDist /= 2; 861 } // store scroll distance 862 863 864 self.parallaxScrollDistance = scrollDist; // vertical center 865 866 if (isScroll) { 867 resultMT = (wndH - resultH) / 2; 868 } else { 869 resultMT = (contH - resultH) / 2; 870 } // apply result to item 871 872 873 self.css(self.image.$item, { 874 height: "".concat(resultH, "px"), 875 marginTop: "".concat(resultMT, "px"), 876 left: 'fixed' === self.image.position ? "".concat(rect.left, "px") : '0', 877 width: "".concat(rect.width, "px") 878 }); // call onCoverImage event 879 880 if (self.options.onCoverImage) { 881 self.options.onCoverImage.call(self); 882 } // return some useful data. Used in the video cover function 883 884 885 return { 886 image: { 887 height: resultH, 888 marginTop: resultMT 889 }, 890 container: rect 891 }; 892 } 893 }, { 894 key: "isVisible", 895 value: function isVisible() { 896 return this.isElementInViewport || false; 897 } 898 }, { 899 key: "onScroll", 900 value: function onScroll(force) { 901 var self = this; 902 var rect = self.$item.getBoundingClientRect(); 903 var contT = rect.top; 904 var contH = rect.height; 905 var styles = {}; // check if in viewport 906 907 var viewportRect = rect; 908 909 if (self.options.elementInViewport) { 910 viewportRect = self.options.elementInViewport.getBoundingClientRect(); 911 } 912 913 self.isElementInViewport = 0 <= viewportRect.bottom && 0 <= viewportRect.right && viewportRect.top <= wndH && viewportRect.left <= global__WEBPACK_IMPORTED_MODULE_1__["window"].innerWidth; // stop calculations if item is not in viewport 914 915 if (force ? false : !self.isElementInViewport) { 916 return; 917 } // calculate parallax helping variables 918 919 920 var beforeTop = Math.max(0, contT); 921 var beforeTopEnd = Math.max(0, contH + contT); 922 var afterTop = Math.max(0, -contT); 923 var beforeBottom = Math.max(0, contT + contH - wndH); 924 var beforeBottomEnd = Math.max(0, contH - (contT + contH - wndH)); 925 var afterBottom = Math.max(0, -contT + wndH - contH); 926 var fromViewportCenter = 1 - 2 * ((wndH - contT) / (wndH + contH)); // calculate on how percent of section is visible 927 928 var visiblePercent = 1; 929 930 if (contH < wndH) { 931 visiblePercent = 1 - (afterTop || beforeBottom) / contH; 932 } else if (beforeTopEnd <= wndH) { 933 visiblePercent = beforeTopEnd / wndH; 934 } else if (beforeBottomEnd <= wndH) { 935 visiblePercent = beforeBottomEnd / wndH; 936 } // opacity 937 938 939 if ('opacity' === self.options.type || 'scale-opacity' === self.options.type || 'scroll-opacity' === self.options.type) {
940 styles.transform = 'translate3d(0,0,0)'; 941 styles.opacity = visiblePercent; 942 } // scale 943 944 945 if ('scale' === self.options.type || 'scale-opacity' === self.options.type) { 946 var scale = 1; 947 948 if (0 > self.options.speed) { 949 scale -= self.options.speed * visiblePercent; 950 } else { 951 scale += self.options.speed * (1 - visiblePercent); 952 } 953 954 styles.transform = "scale(".concat(scale, ") translate3d(0,0,0)"); 955 } // scroll 956 957 958 if ('scroll' === self.options.type || 'scroll-opacity' === self.options.type) { 959 var positionY = self.parallaxScrollDistance * fromViewportCenter; // fix if parallax block in absolute position 960 961 if ('absolute' === self.image.position) { 962 positionY -= contT; 963 } 964 965 styles.transform = "translate3d(0,".concat(positionY, "px,0)"); 966 } 967 968 self.css(self.image.$item, styles); // call onScroll event 969 970 if (self.options.onScroll) { 971 self.options.onScroll.call(self, { 972 section: rect, 973 beforeTop: beforeTop, 974 beforeTopEnd: beforeTopEnd, 975 afterTop: afterTop, 976 beforeBottom: beforeBottom, 977 beforeBottomEnd: beforeBottomEnd, 978 afterBottom: afterBottom, 979 visiblePercent: visiblePercent, 980 fromViewportCenter: fromViewportCenter 981 }); 982 } 983 } 984 }, { 985 key: "onResize", 986 value: function onResize() { 987 this.coverImage(); 988 this.clipContainer(); 989 } 990 }]); 991 992 return Jarallax; 993}(); // global definition 994 995 996var plugin = function plugin(items, options) { 997 // check for dom element 998 // thanks: http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object 999 if ('object' === (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) ? items instanceof HTMLElement : items && 'object' === _typeof(items) && null !== items && 1 === items.nodeType && 'string' === typeof items.nodeName) { 1000 items = [items]; 1001 } 1002 1003 var len = items.length; 1004 var k = 0; 1005 var ret; 1006 1007 for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { 1008 args[_key2 - 2] = arguments[_key2]; 1009 } 1010 1011 for (k; k < len; k += 1) { 1012 if ('object' === _typeof(options) || 'undefined' === typeof options) { 1013 if (!items[k].jarallax) { 1014 items[k].jarallax = new Jarallax(items[k], options); 1015 } 1016 } else if (items[k].jarallax) { 1017 // eslint-disable-next-line prefer-spread 1018 ret = items[k].jarallax[options].apply(items[k].jarallax, args); 1019 } 1020 1021 if ('undefined' !== typeof ret) { 1022 return ret; 1023 } 1024 } 1025 1026 return items; 1027}; 1028 1029plugin.constructor = Jarallax; 1030/* harmony default export */ __webpack_exports__["default"] = (plugin); 1031 1032/***/ }) 1033/******/ ]);
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.