jarallax.min.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  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(n) {
  8. var o = {};
  9. function i(e) {
  10. if (o[e]) return o[e].exports;
  11. var t = o[e] = {
  12. i: e,
  13. l: !1,
  14. exports: {}
  15. };
  16. return n[e].call(t.exports, t, t.exports, i), t.l = !0, t.exports
  17. }
  18. i.m = n, i.c = o, i.d = function(e, t, n) {
  19. i.o(e, t) || Object.defineProperty(e, t, {
  20. enumerable: !0,
  21. get: n
  22. })
  23. }, i.r = function(e) {
  24. "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
  25. value: "Module"
  26. }), Object.defineProperty(e, "__esModule", {
  27. value: !0
  28. })
  29. }, i.t = function(t, e) {
  30. if (1 & e && (t = i(t)), 8 & e) return t;
  31. if (4 & e && "object" == typeof t && t && t.__esModule) return t;
  32. var n = Object.create(null);
  33. if (i.r(n), Object.defineProperty(n, "default", {
  34. enumerable: !0,
  35. value: t
  36. }), 2 & e && "string" != typeof t)
  37. for (var o in t) i.d(n, o, function(e) {
  38. return t[e]
  39. }.bind(null, o));
  40. return n
  41. }, i.n = function(e) {
  42. var t = e && e.__esModule ? function() {
  43. return e.default
  44. } : function() {
  45. return e
  46. };
  47. return i.d(t, "a", t), t
  48. }, i.o = function(e, t) {
  49. return Object.prototype.hasOwnProperty.call(e, t)
  50. }, i.p = "", i(i.s = 10)
  51. }([, , function(e, t) {
  52. e.exports = function(e) {
  53. "complete" === document.readyState || "interactive" === document.readyState ? e.call() : document.attachEvent ? document.attachEvent("onreadystatechange", function() {
  54. "interactive" === document.readyState && e.call()
  55. }) : document.addEventListener && document.addEventListener("DOMContentLoaded", e)
  56. }
  57. }, function(n, e, t) {
  58. (function(e) {
  59. var t = "undefined" != typeof window ? window : void 0 !== e ? e : "undefined" != typeof self ? self : {};
  60. n.exports = t
  61. }).call(this, t(4))
  62. }, function(e, t) {
  63. function n(e) {
  64. return (n = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
  65. return typeof e
  66. } : function(e) {
  67. return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
  68. })(e)
  69. }
  70. var o = function() {
  71. return this
  72. }();
  73. try {
  74. o = o || new Function("return this")()
  75. } catch (e) {
  76. "object" === ("undefined" == typeof window ? "undefined" : n(window)) && (o = window)
  77. }
  78. e.exports = o
  79. }, , , , , , function(e, t, n) {
  80. e.exports = n(11)
  81. }, function(e, t, n) {
  82. "use strict";
  83. n.r(t);
  84. var o = n(2),
  85. i = n.n(o),
  86. a = n(3),
  87. r = n(12);
  88. function l(e) {
  89. return (l = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
  90. return typeof e
  91. } : function(e) {
  92. return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
  93. })(e)
  94. }
  95. var s, c, u = a.window.jarallax;
  96. a.window.jarallax = r.default, a.window.jarallax.noConflict = function() {
  97. return a.window.jarallax = u, this
  98. }, void 0 !== a.jQuery && ((s = function() {
  99. for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++) t[n] = arguments[n];
  100. Array.prototype.unshift.call(t, this);
  101. var o = r.default.apply(a.window, t);
  102. return "object" !== l(o) ? o : this
  103. }).constructor = r.default.constructor, c = a.jQuery.fn.jarallax, a.jQuery.fn.jarallax = s, a.jQuery.fn.jarallax.noConflict = function() {
  104. return a.jQuery.fn.jarallax = c, this
  105. }), i()(function() {
  106. Object(r.default)(document.querySelectorAll("[data-jarallax]"))
  107. })
  108. }, function(e, t, n) {
  109. "use strict";
  110. n.r(t);
  111. var o = n(2),
  112. i = n.n(o),
  113. b = n(3);
  114. function c(e, t) {
  115. return function(e) {
  116. if (Array.isArray(e)) return e
  117. }(e) || function(e, t) {
  118. if ("undefined" == typeof Symbol || !(Symbol.iterator in Object(e))) return;
  119. var n = [],
  120. o = !0,
  121. i = !1,
  122. a = void 0;
  123. try {
  124. for (var r, l = e[Symbol.iterator](); !(o = (r = l.next()).done) && (n.push(r.value), !t || n.length !== t); o = !0);
  125. } catch (e) {
  126. i = !0, a = e
  127. } finally {
  128. try {
  129. o || null == l.return || l.return()
  130. } finally {
  131. if (i) throw a
  132. }
  133. }
  134. return n
  135. }(e, t) || function(e, t) {
  136. if (!e) return;
  137. if ("string" == typeof e) return a(e, t);
  138. var n = Object.prototype.toString.call(e).slice(8, -1);
  139. "Object" === n && e.constructor && (n = e.constructor.name);
  140. if ("Map" === n || "Set" === n) return Array.from(e);
  141. if ("Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return a(e, t)
  142. }(e, t) || function() {
  143. throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
  144. }()
  145. }
  146. function a(e, t) {
  147. (null == t || t > e.length) && (t = e.length);
  148. for (var n = 0, o = new Array(t); n < t; n++) o[n] = e[n];
  149. return o
  150. }
  151. function u(e) {
  152. return (u = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
  153. return typeof e
  154. } : function(e) {
  155. return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
  156. })(e)
  157. }
  158. function r(e, t) {
  159. for (var n = 0; n < t.length; n++) {
  160. var o = t[n];
  161. o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o)
  162. }
  163. }
  164. var l, h, p = b.window.navigator,
  165. d = -1 < p.userAgent.indexOf("MSIE ") || -1 < p.userAgent.indexOf("Trident/") || -1 < p.userAgent.indexOf("Edge/"),
  166. s = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(p.userAgent),
  167. m = function() {
  168. for (var e = "transform WebkitTransform MozTransform".split(" "), t = document.createElement("div"), n = 0; n < e.length; n += 1)
  169. if (t && void 0 !== t.style[e[n]]) return e[n];
  170. return !1
  171. }();
  172. function f() {
  173. h = s ? (!l && document.body && ((l = document.createElement("div")).style.cssText = "position: fixed; top: -9999px; left: 0; height: 100vh; width: 0;", document.body.appendChild(l)), (l ? l.clientHeight : 0) || b.window.innerHeight || document.documentElement.clientHeight) : b.window.innerHeight || document.documentElement.clientHeight
  174. }
  175. f(), b.window.addEventListener("resize", f), b.window.addEventListener("orientationchange", f), b.window.addEventListener("load", f), i()(function() {
  176. f()
  177. });
  178. var g = [];
  179. function y() {
  180. g.length && (g.forEach(function(e, t) {
  181. var n = e.instance,
  182. o = e.oldData,
  183. i = n.$item.getBoundingClientRect(),
  184. a = {
  185. width: i.width,
  186. height: i.height,
  187. top: i.top,
  188. bottom: i.bottom,
  189. wndW: b.window.innerWidth,
  190. wndH: h
  191. },
  192. r = !o || o.wndW !== a.wndW || o.wndH !== a.wndH || o.width !== a.width || o.height !== a.height,
  193. l = r || !o || o.top !== a.top || o.bottom !== a.bottom;
  194. g[t].oldData = a, r && n.onResize(), l && n.onScroll()
  195. }), b.window.requestAnimationFrame(y))
  196. }
  197. function v(e, t) {
  198. ("object" === ("undefined" == typeof HTMLElement ? "undefined" : u(HTMLElement)) ? e instanceof HTMLElement : e && "object" === u(e) && null !== e && 1 === e.nodeType && "string" == typeof e.nodeName) && (e = [e]);
  199. for (var n, o = e.length, i = 0, a = arguments.length, r = new Array(2 < a ? a - 2 : 0), l = 2; l < a; l++) r[l - 2] = arguments[l];
  200. for (; i < o; i += 1)
  201. if ("object" === u(t) || void 0 === t ? e[i].jarallax || (e[i].jarallax = new w(e[i], t)) : e[i].jarallax && (n = e[i].jarallax[t].apply(e[i].jarallax, r)), void 0 !== n) return n;
  202. return e
  203. }
  204. var x = 0,
  205. w = function() {
  206. function s(e, t) {
  207. ! function(e, t) {
  208. if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
  209. }(this, s);
  210. var n = this;
  211. n.instanceID = x, x += 1, n.$item = e, n.defaults = {
  212. type: "scroll",
  213. speed: .5,
  214. imgSrc: null,
  215. imgElement: ".jarallax-img",
  216. imgSize: "cover",
  217. imgPosition: "50% 50%",
  218. imgRepeat: "no-repeat",
  219. keepImg: !1,
  220. elementInViewport: null,
  221. zIndex: -100,
  222. disableParallax: !1,
  223. disableVideo: !1,
  224. videoSrc: null,
  225. videoStartTime: 0,
  226. videoEndTime: 0,
  227. videoVolume: 0,
  228. videoLoop: !0,
  229. videoPlayOnlyVisible: !0,
  230. videoLazyLoading: !0,
  231. onScroll: null,
  232. onInit: null,
  233. onDestroy: null,
  234. onCoverImage: null
  235. };
  236. var o, i, a = n.$item.dataset || {},
  237. r = {};
  238. Object.keys(a).forEach(function(e) {
  239. var t = e.substr(0, 1).toLowerCase() + e.substr(1);
  240. t && void 0 !== n.defaults[t] && (r[t] = a[e])
  241. }), n.options = n.extend({}, n.defaults, r, t), n.pureOptions = n.extend({}, n.options), Object.keys(n.options).forEach(function(e) {
  242. "true" === n.options[e] ? n.options[e] = !0 : "false" === n.options[e] && (n.options[e] = !1)
  243. }), n.options.speed = Math.min(2, Math.max(-1, parseFloat(n.options.speed))), "string" == typeof n.options.disableParallax && (n.options.disableParallax = new RegExp(n.options.disableParallax)), n.options.disableParallax instanceof RegExp && (o = n.options.disableParallax, n.options.disableParallax = function() {
  244. return o.test(p.userAgent)
  245. }), "function" != typeof n.options.disableParallax && (n.options.disableParallax = function() {
  246. return !1
  247. }), "string" == typeof n.options.disableVideo && (n.options.disableVideo = new RegExp(n.options.disableVideo)), n.options.disableVideo instanceof RegExp && (i = n.options.disableVideo, n.options.disableVideo = function() {
  248. return i.test(p.userAgent)
  249. }), "function" != typeof n.options.disableVideo && (n.options.disableVideo = function() {
  250. return !1
  251. });
  252. var l = n.options.elementInViewport;
  253. l && "object" === u(l) && void 0 !== l.length && (l = c(l, 1)[0]), l instanceof Element || (l = null), n.options.elementInViewport = l, n.image = {
  254. src: n.options.imgSrc || null,
  255. $container: null,
  256. useImgTag: !1,
  257. position: /iPad|iPhone|iPod|Android/.test(p.userAgent) ? "absolute" : "fixed"
  258. }, n.initImg() && n.canInitParallax() && n.init()
  259. }
  260. var e, t, n;
  261. return e = s, (t = [{
  262. key: "css",
  263. value: function(t, n) {
  264. return "string" == typeof n ? b.window.getComputedStyle(t).getPropertyValue(n) : (n.transform && m && (n[m] = n.transform), Object.keys(n).forEach(function(e) {
  265. t.style[e] = n[e]
  266. }), t)
  267. }
  268. }, {
  269. key: "extend",
  270. value: function(n) {
  271. for (var e = arguments.length, o = new Array(1 < e ? e - 1 : 0), t = 1; t < e; t++) o[t - 1] = arguments[t];
  272. return n = n || {}, Object.keys(o).forEach(function(t) {
  273. o[t] && Object.keys(o[t]).forEach(function(e) {
  274. n[e] = o[t][e]
  275. })
  276. }), n
  277. }
  278. }, {
  279. key: "getWindowData",
  280. value: function() {
  281. return {
  282. width: b.window.innerWidth || document.documentElement.clientWidth,
  283. height: h,
  284. y: document.documentElement.scrollTop
  285. }
  286. }
  287. }, {
  288. key: "initImg",
  289. value: function() {
  290. var e = this,
  291. t = e.options.imgElement;
  292. return t && "string" == typeof t && (t = e.$item.querySelector(t)), t instanceof Element || (e.options.imgSrc ? (t = new Image).src = e.options.imgSrc : t = null), t && (e.options.keepImg ? e.image.$item = t.cloneNode(!0) : (e.image.$item = t, e.image.$itemParent = t.parentNode), e.image.useImgTag = !0), !!e.image.$item || (null === e.image.src && (e.image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", e.image.bgImage = e.css(e.$item, "background-image")), !(!e.image.bgImage || "none" === e.image.bgImage))
  293. }
  294. }, {
  295. key: "canInitParallax",
  296. value: function() {
  297. return m && !this.options.disableParallax()
  298. }
  299. }, {
  300. key: "init",
  301. value: function() {
  302. var e, t, n, o = this,
  303. i = {
  304. position: "absolute",
  305. top: 0,
  306. left: 0,
  307. width: "100%",
  308. height: "100%",
  309. overflow: "hidden"
  310. },
  311. a = {
  312. pointerEvents: "none",
  313. transformStyle: "preserve-3d",
  314. backfaceVisibility: "hidden",
  315. willChange: "transform,opacity"
  316. };
  317. o.options.keepImg || ((e = o.$item.getAttribute("style")) && o.$item.setAttribute("data-jarallax-original-styles", e), !o.image.useImgTag || (t = o.image.$item.getAttribute("style")) && o.image.$item.setAttribute("data-jarallax-original-styles", t)), "static" === o.css(o.$item, "position") && o.css(o.$item, {
  318. position: "relative"
  319. }), "auto" === o.css(o.$item, "z-index") && o.css(o.$item, {
  320. zIndex: 0
  321. }), o.image.$container = document.createElement("div"), o.css(o.image.$container, i), o.css(o.image.$container, {
  322. "z-index": o.options.zIndex
  323. }), d && o.css(o.image.$container, {
  324. opacity: .9999
  325. }), o.image.$container.setAttribute("id", "jarallax-container-".concat(o.instanceID)), o.$item.appendChild(o.image.$container), o.image.useImgTag ? a = o.extend({
  326. "object-fit": o.options.imgSize,
  327. "object-position": o.options.imgPosition,
  328. "font-family": "object-fit: ".concat(o.options.imgSize, "; object-position: ").concat(o.options.imgPosition, ";"),
  329. "max-width": "none"
  330. }, i, a) : (o.image.$item = document.createElement("div"), o.image.src && (a = o.extend({
  331. "background-position": o.options.imgPosition,
  332. "background-size": o.options.imgSize,
  333. "background-repeat": o.options.imgRepeat,
  334. "background-image": o.image.bgImage || 'url("'.concat(o.image.src, '")')
  335. }, i, a))), "opacity" !== o.options.type && "scale" !== o.options.type && "scale-opacity" !== o.options.type && 1 !== o.options.speed || (o.image.position = "absolute"), "fixed" === o.image.position && (n = function(e) {
  336. for (var t = []; null !== e.parentElement;) 1 === (e = e.parentElement).nodeType && t.push(e);
  337. return t
  338. }(o.$item).filter(function(e) {
  339. var t = b.window.getComputedStyle(e),
  340. n = t["-webkit-transform"] || t["-moz-transform"] || t.transform;
  341. return n && "none" !== n || /(auto|scroll)/.test(t.overflow + t["overflow-y"] + t["overflow-x"])
  342. }), o.image.position = n.length ? "absolute" : "fixed"), a.position = o.image.position, o.css(o.image.$item, a), o.image.$container.appendChild(o.image.$item), o.onResize(), o.onScroll(!0), o.options.onInit && o.options.onInit.call(o), "none" !== o.css(o.$item, "background-image") && o.css(o.$item, {
  343. "background-image": "none"
  344. }), o.addToParallaxList()
  345. }
  346. }, {
  347. key: "addToParallaxList",
  348. value: function() {
  349. g.push({
  350. instance: this
  351. }), 1 === g.length && b.window.requestAnimationFrame(y)
  352. }
  353. }, {
  354. key: "removeFromParallaxList",
  355. value: function() {
  356. var n = this;
  357. g.forEach(function(e, t) {
  358. e.instance.instanceID === n.instanceID && g.splice(t, 1)
  359. })
  360. }
  361. }, {
  362. key: "destroy",
  363. value: function() {
  364. var e = this;
  365. e.removeFromParallaxList();
  366. var t, n = e.$item.getAttribute("data-jarallax-original-styles");
  367. e.$item.removeAttribute("data-jarallax-original-styles"), n ? e.$item.setAttribute("style", n) : e.$item.removeAttribute("style"), e.image.useImgTag && (t = e.image.$item.getAttribute("data-jarallax-original-styles"), e.image.$item.removeAttribute("data-jarallax-original-styles"), t ? e.image.$item.setAttribute("style", n) : e.image.$item.removeAttribute("style"), e.image.$itemParent && e.image.$itemParent.appendChild(e.image.$item)), e.$clipStyles && e.$clipStyles.parentNode.removeChild(e.$clipStyles), e.image.$container && e.image.$container.parentNode.removeChild(e.image.$container), e.options.onDestroy && e.options.onDestroy.call(e), delete e.$item.jarallax
  368. }
  369. }, {
  370. key: "clipContainer",
  371. value: function() {
  372. var e, t, n, o, i;
  373. "fixed" === this.image.position && (n = (t = (e = this).image.$container.getBoundingClientRect()).width, o = t.height, e.$clipStyles || (e.$clipStyles = document.createElement("style"), e.$clipStyles.setAttribute("type", "text/css"), e.$clipStyles.setAttribute("id", "jarallax-clip-".concat(e.instanceID)), (document.head || document.getElementsByTagName("head")[0]).appendChild(e.$clipStyles)), i = "#jarallax-container-".concat(e.instanceID, " {\n clip: rect(0 ").concat(n, "px ").concat(o, "px 0);\n clip: rect(0, ").concat(n, "px, ").concat(o, "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 }"), e.$clipStyles.styleSheet ? e.$clipStyles.styleSheet.cssText = i : e.$clipStyles.innerHTML = i)
  374. }
  375. }, {
  376. key: "coverImage",
  377. value: function() {
  378. var e = this,
  379. t = e.image.$container.getBoundingClientRect(),
  380. n = t.height,
  381. o = e.options.speed,
  382. i = "scroll" === e.options.type || "scroll-opacity" === e.options.type,
  383. a = 0,
  384. r = n,
  385. l = 0;
  386. return i && (o < 0 ? (a = o * Math.max(n, h), h < n && (a -= o * (n - h))) : a = o * (n + h), 1 < o ? r = Math.abs(a - h) : o < 0 ? r = a / o + Math.abs(a) : r += (h - n) * (1 - o), a /= 2), e.parallaxScrollDistance = a, l = i ? (h - r) / 2 : (n - r) / 2, e.css(e.image.$item, {
  387. height: "".concat(r, "px"),
  388. marginTop: "".concat(l, "px"),
  389. left: "fixed" === e.image.position ? "".concat(t.left, "px") : "0",
  390. width: "".concat(t.width, "px")
  391. }), e.options.onCoverImage && e.options.onCoverImage.call(e), {
  392. image: {
  393. height: r,
  394. marginTop: l
  395. },
  396. container: t
  397. }
  398. }
  399. }, {
  400. key: "isVisible",
  401. value: function() {
  402. return this.isElementInViewport || !1
  403. }
  404. }, {
  405. key: "onScroll",
  406. value: function(e) {
  407. var t, n, o, i, a, r, l, s, c, u, p = this,
  408. d = p.$item.getBoundingClientRect(),
  409. m = d.top,
  410. f = d.height,
  411. g = {},
  412. y = d;
  413. p.options.elementInViewport && (y = p.options.elementInViewport.getBoundingClientRect()), p.isElementInViewport = 0 <= y.bottom && 0 <= y.right && y.top <= h && y.left <= b.window.innerWidth, (e || p.isElementInViewport) && (t = Math.max(0, m), n = Math.max(0, f + m), o = Math.max(0, -m), i = Math.max(0, m + f - h), a = Math.max(0, f - (m + f - h)), r = Math.max(0, -m + h - f), l = 1 - (h - m) / (h + f) * 2, s = 1, f < h ? s = 1 - (o || i) / f : n <= h ? s = n / h : a <= h && (s = a / h), "opacity" !== p.options.type && "scale-opacity" !== p.options.type && "scroll-opacity" !== p.options.type || (g.transform = "translate3d(0,0,0)", g.opacity = s), "scale" !== p.options.type && "scale-opacity" !== p.options.type || (c = 1, p.options.speed < 0 ? c -= p.options.speed * s : c += p.options.speed * (1 - s), g.transform = "scale(".concat(c, ") translate3d(0,0,0)")), "scroll" !== p.options.type && "scroll-opacity" !== p.options.type || (u = p.parallaxScrollDistance * l, "absolute" === p.image.position && (u -= m), g.transform = "translate3d(0,".concat(u, "px,0)")), p.css(p.image.$item, g), p.options.onScroll && p.options.onScroll.call(p, {
  414. section: d,
  415. beforeTop: t,
  416. beforeTopEnd: n,
  417. afterTop: o,
  418. beforeBottom: i,
  419. beforeBottomEnd: a,
  420. afterBottom: r,
  421. visiblePercent: s,
  422. fromViewportCenter: l
  423. }))
  424. }
  425. }, {
  426. key: "onResize",
  427. value: function() {
  428. this.coverImage(), this.clipContainer()
  429. }
  430. }]) && r(e.prototype, t), n && r(e, n), s
  431. }();
  432. v.constructor = w, t.default = v
  433. }]);
  434. //# sourceMappingURL=jarallax.min.js.map