HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<body>
<main class="o-scroll bg-dark" id="js-scroll" data-scroll-container>
<div class="text"> Scroll Page</div>
<section style="margin-top: 1200px">
<div class="container">
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
</div>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EasePack.min.js"></script>
</body>
body{
margin: 0;
}
main.bg-dark {
background-color: #000 !important;
color: #fff;
display: block;
}
.o-scroll {
overflow: hidden;
}
html.has-scroll-smooth {
overflow: hidden; }
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.has-scroll-smooth body {
overflow: hidden; }
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh; }
html:not(.has-scroll-init) {
cursor: wait;
overflow: hidden
}
html:not(.has-scroll-smooth) .c-fixed {
top: 0
}
/*html.has-scroll-init {
overflow:auto
}*/
.o-button,
button {
display: inline-block;
overflow: visible;
margin: 0;
padding: 0;
outline: 0;
border: 0;
background: none transparent;
color: inherit;
vertical-align: middle;
text-align: center;
text-transform: none;
font: inherit;
line-height: normal;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.o-button,
.o-button:focus,
.o-button:hover,
button,
button:focus,
button:hover {
text-decoration: none
}
ol,
ul {
list-style: none;
}
a {
color: #BF9865;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
a:hover,
a:focus {
color: #000;
text-decoration: none;
outline: 0;
}
h1 { font-size: 5vw }
.z-index-2 {
z-index: 2;
}
.cover-bg {
position: relative;
background-size: cover !important;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
}
/*==========================================
Padding & Margin
==========================================*/
.txt-10 { font-size: 10px !important; }
.txt-11 { font-size: 11px !important; }
.txt-12 { font-size: 12px !important; }
.txt-13 { font-size: 13px !important; }
.txt-14 { font-size: 14px !important; }
.txt-15 { font-size: 15px !important; }
.txt-16 { font-size: 16px !important; }
.txt-20 { font-size: 20px !important; }
.txt-25 { font-size: 25px !important; }
.txt-30 { font-size: 30px !important; }
.txt-35 { font-size: 35px !important; }
.txt-40 { font-size: 40px !important; }
.txt-50 { font-size: 50px !important; }
.txt-60 { font-size: 60px !important; }
.txt-70 { font-size: 70px; }
.fw-100 { font-weight: 100; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.p-section-70 { padding: 4.38rem 0 }
.p-section-100 { padding: 6.25rem 0 }
.p-section-120 { padding: 7.5rem 0 }
.p-section-150 { padding: 9.4rem 0 }
.p-section-200 { padding: 12.5rem 0 }
.m-section-70 { margin: 4.38rem 0 }
.m-section-100 { margin: 6.25rem 0 }
.m-section-120 { margin: 7.5rem 0 }
.m-section-150 { margin: 9.4rem 0 }
.m-section-200 { margin: 12.5rem 0 }
.mt-6 { margin-top: 3.75rem }
.mt-7 { margin-top: 4.38rem }
.mt-8 { margin-top: 6.25rem }
.mt-9 { margin-top: 7.5rem }
.mt-10 { margin-top: 9.4rem }
.mt-11 { margin-top: 12.5rem }
.mb-6 { margin-bottom: 3.75rem }
.mb-7 { margin-bottom: 4.38rem }
.mb-8 { margin-bottom: 6.25rem }
.mb-9 { margin-bottom: 7.5rem }
.mb-10 { margin-bottom: 9.4rem }
.mb-11 { margin-bottom: 12.5rem }
.ml-6 { margin-left: 3.75rem }
.ml-7 { margin-left: 4.38rem }
.ml-8 { margin-left: 6.25rem }
.mr-6 { margin-right: 3.75rem }
.mr-7 { margin-right: 4.38rem }
.mr-8 { margin-right: 6.25rem }
.p-6 { padding: 6.25rem }
.pt-6 { padding-top: 3.75rem }
.pt-7 { padding-top: 4.38rem }
.pt-8 { padding-top: 6.25rem }
.pt-9 { padding-top: 7.5rem }
.pt-10 { padding-top: 9.4rem }
.pt-11 { padding-top: 12.5rem }
.pt-12 { padding-top: 15.5rem }
.pt-13 { padding-top: 18.75rem }
.pb-6 { padding-bottom: 3.75rem }
.pb-7 { padding-bottom: 4.38rem }
.pb-8 { padding-bottom: 6.25rem }
.pb-9 { padding-bottom: 7.5rem }
.pb-10 { padding-bottom: 9.4rem }
.pb-11 { padding-bottom: 12.5rem }
.pb-12 { padding-bottom: 15.5rem }
.pb-13 { padding-bottom: 18.75rem }
.pl-6 { padding-left: 3.75rem }
.pl-7 { padding-left: 4.38rem }
.pl-8 { padding-left: 6.25rem }
.pl-9 { padding-left: 7.5rem }
.pl-10 { padding-left: 9.4rem }
.pl-11 { padding-left: 12.5rem }
.pr-6 { padding-right: 3.75rem }
.pr-7 { padding-right: 4.38rem }
.pr-8 { padding-right: 6.25rem }
.pr-9 { padding-right: 7.5rem }
.pr-10 { padding-right: 9.4rem }
.pr-11 { padding-right: 12.5rem }
.vh-17 { height: 17vh }
.vh-28 { height: 28vh }
.vh-34 { height: 34vh }
.vh-40 { height: 40vh }
.vh-45 { height: 45vh }
.vh-50 { height: 50vh }
.vh-57 { height: 57vh }
.vh-68 { height: 68vh }
.vh-80 { height: 80vh }
.vh-90 { height: 90vh }
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0; }
.c-scrollbar:hover {
transform: scaleX(1.45); }
.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
opacity: 1; }
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.8;
width: 7px;
border-radius: 0px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab; }
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing; }
.o-h1,
h1 {
line-height: .9;
}
.o-title {
margin: 0;
padding: 2.5rem 0;
perspective: 600px;
-webkit-perspective: 600px
}
.o-title_line {
display: block;
opacity: 0;
transform-origin: center top;
transform-style: preserve-3d;
transform: translateY(100%) rotateX(-80deg);
transition: opacity .8s cubic-bezier(.215, .61, .355, 1), transform .8s cubic-bezier(.215, .61, .355, 1);
font-size: 0
}
.o-title.is-inview .o-title_line {
transform: none;
opacity: 1
}
.o-title.is-inview .o-title_line:first-child {
transition-delay: .4s
}
.o-title.is-inview .o-title_line:nth-child(2) {
transition-delay: .5s
}
.o-title.is-inview .o-title_line:nth-child(3) {
transition-delay: .6s
}
.o-title.is-inview .o-title_line:nth-child(4) {
transition-delay: .7s
}
.o-title_line span {
display: inline-block;
min-width: .05em;
font-size: 13.5vw
}
.o-image_wrapper {
position: relative;
overflow: hidden;
/*background-color: red*/
}
.o-image img {
/*width: 100%;*/
opacity: 0;
transform: scale(1.4);
transition: opacity 1.2s cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1);
background-color: red
}
.o-image.is-inview img {
opacity: 1;
transform: scale(1);
transition-delay: .6s;
}
.c-fixed_wrapper {
position: relative;
overflow: hidden;
background-color: #FF0004 !important;
}
.c-fixed_target {
bottom: -100vh
}
.c-fixed,
.c-fixed_target {
position: absolute;
top: -100vh;
right: 0;
left: 0
}
.c-fixed {
height: 100%;
background-size: cover;
background-position: 50%;
/*opacity: .75;*/
/*mix-blend-mode: multiply;*/
}
.c-section {
position: relative
}
@media (max-width:1199px) {
.c-section {
padding-bottom: 10vh;
margin-bottom: 10vh
}
}
@media (min-width:1200px) {
.c-section {
margin-bottom: 35vh
}
}
.c-section_infos {
position: relative;
max-width: 320px;
z-index: 30
}
@media (min-width:1000px) {
.c-section_infos {
padding-top: 7.5rem
}
.c-section_infos.-padding {
padding-top: 35vh
}
}
@media (max-width:999px) {
.c-section_infos {
margin-bottom: 1.875rem
}
}
.o-row{
overflow: hidden;
white-space: nowrap;
width: max-content;
width: -webkit-max-content;
width: -ms-max-content;
line-height: 80%;
display: block;
}
.o-row > span{
display: block;
transition: .8s cubic-bezier(.215,.61,.355,1);
transition-delay: .2s;
transform: translate(0, 100%);
}
.detect .o-row:first-child span{
transition-delay: .1s;
}
.detect .o-row:nth-child(2) span{
transition-delay: .2s;
}
.detect .o-row:nth-child(3) span{
transition-delay: .3s;
}
.detect .o-row:nth-child(4) span{
transition-delay: .4s;
}
.detect.is-inview .o-row>span{
transform: translate(0, 0);
}
.img-detect{
overflow: hidden;
}
.img-detect img{
transform: scale(1.4, 1.4);
transition: transform 2.6s cubic-bezier(.215,.61,.355,1);
transition-delay: .1s;
}
.img-detect.is-inview img{
transform: scale(1, 1);
}
.o-h2{
font-size: 4.5vw;
}
.c-banner{
display: flex;
justify-content: space-between;
margin-top: 0;
padding-top: 20vh;
}
.u-shift{
transform: translate(20%, 0);
}
.c-banner_image img{
width: 112%;
margin-top: -10%;
}
.c-about{
display: flex;
align-items: center;
justify-content: space-between;
padding: 5% var(--padding-side);
}
.c-about_title h2{
transform: translate(0, -45%);
}
.c-about_image{
position: relative;
text-align: center;
}
.c-beforeafter img{
width: 100%;
margin-bottom: 25px;
}
.c-beforeafter--left{
padding: 0 3vw 0 5vw;
}
.c-beforeafter--right{
padding: 0 4vw 0 2vw;
margin-top: 15vh;
}
.anim-1>* {
opacity: 0;
transform: translateY(60px);
transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1);
}
.anim-1.is-inview>* {
opacity: 1;
transform: none
}
.anim-1.is-inview>:first-child {
transition-delay: .06s
}
.anim-1.is-inview>:nth-child(2) {
transition-delay: .12s
}
.anim-1.is-inview>:nth-child(3) {
transition-delay: .18s
}
.text {
font-size: 50px;
margin-top: 100px
}
div {
text-align: center
}
.box {
width:250px;
height:250px;
position:relative;
border-radius:6px;
margin-top:4px;
display:block;
line-height:50px;
text-align:center;
color:#333;
margin-bottom: 300px
}
.green{
background-color:#6fb936;
}
.orange {
background-color:#f38630;
}
.grey {
background-color:#989898;
}
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: ".box",
rotation: 360,
duration: 3,
x: 200
});
! function() {
"use strict";
function s(t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}
function n(t, e) {
for (var i = 0; i < e.length; i++) {
var s = e[i];
s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), Object.defineProperty(t, s.key, s)
}
}
function o(t, e, i) {
return e && n(t.prototype, e), i && n(t, i), t
}
function e(e, t) {
var i = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var s = Object.getOwnPropertySymbols(e);
t && (s = s.filter(function(t) {
return Object.getOwnPropertyDescriptor(e, t).enumerable
})), i.push.apply(i, s)
}
return i
}
function i(n) {
for (var t = 1; t < arguments.length; t++) {
var o = null != arguments[t] ? arguments[t] : {};
t % 2 ? e(Object(o), !0).forEach(function(t) {
var e, i, s;
e = n, s = o[i = t], i in e ? Object.defineProperty(e, i, {
value: s,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[i] = s
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(o)) : e(Object(o)).forEach(function(t) {
Object.defineProperty(n, t, Object.getOwnPropertyDescriptor(o, t))
})
}
return n
}
function l(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: !0,
configurable: !0
}
}), e && a(t, e)
}
function r(t) {
return (r = Object.setPrototypeOf ? Object.getPrototypeOf : function(t) {
return t.__proto__ || Object.getPrototypeOf(t)
})(t)
}
function a(t, e) {
return (a = Object.setPrototypeOf || function(t, e) {
return t.__proto__ = e, t
})(t, e)
}
function c(t) {
if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return t
}
function h(t, e) {
return !e || "object" != typeof e && "function" != typeof e ? c(t) : e
}
function d(t, e, i) {
return (d = "undefined" != typeof Reflect && Reflect.get ? Reflect.get : function(t, e, i) {
var s = function(t, e) {
for (; !Object.prototype.hasOwnProperty.call(t, e) && null !== (t = r(t)););
return t
}(t, e);
if (s) {
var n = Object.getOwnPropertyDescriptor(s, e);
return n.get ? n.get.call(i) : n.value
}
})(t, e, i || t)
}
function L(t, e) {
return function(t) {
if (Array.isArray(t)) return t
}(t) || function(t, e) {
if (!(Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t))) return;
var i = [],
s = !0,
n = !1,
o = void 0;
try {
for (var l, r = t[Symbol.iterator](); !(s = (l = r.next()).done) && (i.push(l.value), !e || i.length !== e); s = !0);
} catch (t) {
n = !0, o = t
} finally {
try {
s || null == r.return || r.return()
} finally {
if (n) throw o
}
}
return i
}(t, e) || function() {
throw new TypeError("Invalid attempt to destructure non-iterable instance")
}()
}
function y(t) {
return function(t) {
if (Array.isArray(t)) {
for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e];
return i
}
}(t) || function(t) {
if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t)
}(t) || function() {
throw new TypeError("Invalid attempt to spread non-iterable instance")
}()
}
var u = {
el: document,
name: "scroll",
offset: [0, 0],
repeat: !1,
smooth: !1,
direction: "vertical",
gestureDirection: "vertical",
reloadOnContextChange: !1,
lerp: .1,
class: "is-inview",
scrollbarContainer: !1,
scrollbarClass: "c-scrollbar",
scrollingClass: "has-scroll-scrolling",
draggingClass: "has-scroll-dragging",
smoothClass: "has-scroll-smooth",
initClass: "has-scroll-init",
getSpeed: !1,
getDirection: !1,
scrollFromAnywhere: !1,
multiplier: 1,
firefoxMultiplier: 50,
touchMultiplier: 2,
resetNativeScroll: !0,
//inertia: .6, // mio
tablet: {
smooth: !1,
direction: "vertical",
gestureDirection: "vertical",
breakpoint: 1024
},
smartphone: {
smooth: !1,
direction: "vertical",
gestureDirection: "vertical"
}
},
f = function() {
function e() {
var t = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
s(this, e), Object.assign(this, u, t), this.smartphone = u.smartphone, t.smartphone && Object.assign(this.smartphone, t.smartphone), this.tablet = u.tablet, t.tablet && Object.assign(this.tablet, t.tablet), this.namespace = "locomotive", this.html = document.documentElement, this.windowHeight = window.innerHeight, this.windowWidth = window.innerWidth, this.windowMiddle = {
x: this.windowWidth / 2,
y: this.windowHeight / 2
}, this.els = {}, this.currentElements = {}, this.listeners = {}, this.hasScrollTicking = !1, this.hasCallEventSet = !1, this.checkScroll = this.checkScroll.bind(this), this.checkResize = this.checkResize.bind(this), this.checkEvent = this.checkEvent.bind(this), this.instance = {
scroll: {
x: 0,
y: 0
},
limit: {
x: this.html.offsetHeight,
y: this.html.offsetHeight
},
currentElements: this.currentElements
}, this.isMobile ? this.isTablet ? this.context = "tablet" : this.context = "smartphone" : this.context = "desktop", this.isMobile && (this.direction = this[this.context].direction), "horizontal" === this.direction ? this.directionAxis = "x" : this.directionAxis = "y", this.getDirection && (this.instance.direction = null), this.getDirection && (this.instance.speed = 0), this.html.classList.add(this.initClass), window.addEventListener("resize", this.checkResize, !1)
}
return o(e, [{
key: "init",
value: function() {
this.initEvents()
}
}, {
key: "checkScroll",
value: function() {
this.dispatchScroll()
}
}, {
key: "checkResize",
value: function() {
var t = this;
this.resizeTick || (this.resizeTick = !0, requestAnimationFrame(function() {
t.resize(), t.resizeTick = !1
}))
}
}, {
key: "resize",
value: function() {}
}, {
key: "checkContext",
value: function() {
if (this.reloadOnContextChange) {
this.isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || "MacIntel" === navigator.platform && 1 < navigator.maxTouchPoints || this.windowWidth < this.tablet.breakpoint, this.isTablet = this.isMobile && this.windowWidth >= this.tablet.breakpoint;
var t = this.context;
if (this.isMobile ? this.isTablet ? this.context = "tablet" : this.context = "smartphone" : this.context = "desktop", t != this.context)("desktop" == t ? this.smooth : this[t].smooth) != ("desktop" == this.context ? this.smooth : this[this.context].smooth) && window.location.reload()
}
}
}, {
key: "initEvents",
value: function() {
var e = this;
this.scrollToEls = this.el.querySelectorAll("[data-".concat(this.name, "-to]")), this.setScrollTo = this.setScrollTo.bind(this), this.scrollToEls.forEach(function(t) {
t.addEventListener("click", e.setScrollTo, !1)
})
}
}, {
key: "setScrollTo",
value: function(t) {
t.preventDefault(), this.scrollTo(t.currentTarget.getAttribute("data-".concat(this.name, "-href")) || t.currentTarget.getAttribute("href"), {
offset: t.currentTarget.getAttribute("data-".concat(this.name, "-offset"))
})
}
}, {
key: "addElements",
value: function() {}
}, {
key: "detectElements",
value: function(l) {
var r = this,
a = this.instance.scroll.y,
c = a + this.windowHeight,
h = this.instance.scroll.x,
d = h + this.windowWidth;
Object.entries(this.els).forEach(function(t) {
var e = L(t, 2),
i = e[0],
s = e[1];
if (!s || s.inView && !l || ("horizontal" === r.direction ? d >= s.left && h < s.right && r.setInView(s, i) : c >= s.top && a < s.bottom && r.setInView(s, i)), s && s.inView)
if ("horizontal" === r.direction) {
var n = s.right - s.left;
s.progress = (r.instance.scroll.x - (s.left - r.windowWidth)) / (n + r.windowWidth), (d < s.left || h > s.right) && r.setOutOfView(s, i)
} else {
var o = s.bottom - s.top;
s.progress = (r.instance.scroll.y - (s.top - r.windowHeight)) / (o + r.windowHeight), (c < s.top || a > s.bottom) && r.setOutOfView(s, i)
}
}), this.hasScrollTicking = !1
}
}, {
key: "setInView",
value: function(t, e) {
this.els[e].inView = !0, t.el.classList.add(t.class), (this.currentElements[e] = t).call && this.hasCallEventSet && (this.dispatchCall(t, "enter"), t.repeat || (this.els[e].call = !1))
}
}, {
key: "setOutOfView",
value: function(t, e) {
var i = this;
this.els[e].inView = !1, Object.keys(this.currentElements).forEach(function(t) {
t === e && delete i.currentElements[t]
}), t.call && this.hasCallEventSet && this.dispatchCall(t, "exit"), t.repeat && t.el.classList.remove(t.class)
}
}, {
key: "dispatchCall",
value: function(t, e) {
this.callWay = e, this.callValue = t.call.split(",").map(function(t) {
return t.trim()
}), this.callObj = t, 1 == this.callValue.length && (this.callValue = this.callValue[0]);
var i = new Event(this.namespace + "call");
this.el.dispatchEvent(i)
}
}, {
key: "dispatchScroll",
value: function() {
var t = new Event(this.namespace + "scroll");
this.el.dispatchEvent(t)
}
}, {
key: "setEvents",
value: function(t, e) {
this.listeners[t] || (this.listeners[t] = []);
var i = this.listeners[t];
i.push(e), 1 === i.length && this.el.addEventListener(this.namespace + t, this.checkEvent, !1), "call" === t && (this.hasCallEventSet = !0, this.detectElements(!0))
}
}, {
key: "unsetEvents",
value: function(t, e) {
if (this.listeners[t]) {
var i = this.listeners[t],
s = i.indexOf(e);
s < 0 || (i.splice(s, 1), 0 === i.index && this.el.removeEventListener(this.namespace + t, this.checkEvent, !1))
}
}
}, {
key: "checkEvent",
value: function(t) {
var e = this,
i = t.type.replace(this.namespace, ""),
s = this.listeners[i];
s && 0 !== s.length && s.forEach(function(t) {
switch (i) {
case "scroll":
return t(e.instance);
case "call":
return t(e.callValue, e.callWay, e.callObj);
default:
return t()
}
})
}
}, {
key: "startScroll",
value: function() {}
}, {
key: "stopScroll",
value: function() {}
}, {
key: "setScroll",
value: function(t, e) {
this.instance.scroll = {
x: 0,
y: 0
}
}
}, {
key: "destroy",
value: function() {
var e = this;
window.removeEventListener("resize", this.checkResize, !1), Object.keys(this.listeners).forEach(function(t) {
e.el.removeEventListener(e.namespace + t, e.checkEvent, !1)
}), this.listeners = {}, this.scrollToEls.forEach(function(t) {
t.removeEventListener("click", e.setScrollTo, !1)
}), this.html.classList.remove(this.initClass)
}
}]), e
}(),
p = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
function t(t, e) {
return t(e = {
exports: {}
}, e.exports), e.exports
}
t(function(t, e) {
t.exports = {
polyfill: function() {
var a = window,
c = document;
if (!("scrollBehavior" in c.documentElement.style && !0 !== a.__forceSmoothScrollPolyfill__)) {
var t, e = a.HTMLElement || a.Element,
l = 468,
h = {
scroll: a.scroll || a.scrollTo,
scrollBy: a.scrollBy,
elementScroll: e.prototype.scroll || u,
scrollIntoView: e.prototype.scrollIntoView
},
d = a.performance && a.performance.now ? a.performance.now.bind(a.performance) : Date.now,
i = (t = a.navigator.userAgent, new RegExp(["MSIE ", "Trident/", "Edge/"].join("|")).test(t) ? 1 : 0);
a.scroll = a.scrollTo = function() {
void 0 !== arguments[0] && (!0 !== s(arguments[0]) ? r.call(a, c.body, void 0 !== arguments[0].left ? ~~arguments[0].left : a.scrollX || a.pageXOffset, void 0 !== arguments[0].top ? ~~arguments[0].top : a.scrollY || a.pageYOffset) : h.scroll.call(a, void 0 !== arguments[0].left ? arguments[0].left : "object" != typeof arguments[0] ? arguments[0] : a.scrollX || a.pageXOffset, void 0 !== arguments[0].top ? arguments[0].top : void 0 !== arguments[1] ? arguments[1] : a.scrollY || a.pageYOffset))
}, a.scrollBy = function() {
void 0 !== arguments[0] && (s(arguments[0]) ? h.scrollBy.call(a, void 0 !== arguments[0].left ? arguments[0].left : "object" != typeof arguments[0] ? arguments[0] : 0, void 0 !== arguments[0].top ? arguments[0].top : void 0 !== arguments[1] ? arguments[1] : 0) : r.call(a, c.body, ~~arguments[0].left + (a.scrollX || a.pageXOffset), ~~arguments[0].top + (a.scrollY || a.pageYOffset)))
}, e.prototype.scroll = e.prototype.scrollTo = function() {
if (void 0 !== arguments[0])
if (!0 !== s(arguments[0])) {
var t = arguments[0].left,
e = arguments[0].top;
r.call(this, this, void 0 === t ? this.scrollLeft : ~~t, void 0 === e ? this.scrollTop : ~~e)
} else {
if ("number" == typeof arguments[0] && void 0 === arguments[1]) throw new SyntaxError("Value could not be converted");
h.elementScroll.call(this, void 0 !== arguments[0].left ? ~~arguments[0].left : "object" != typeof arguments[0] ? ~~arguments[0] : this.scrollLeft, void 0 !== arguments[0].top ? ~~arguments[0].top : void 0 !== arguments[1] ? ~~arguments[1] : this.scrollTop)
}
}, e.prototype.scrollBy = function() {
void 0 !== arguments[0] && (!0 !== s(arguments[0]) ? this.scroll({
left: ~~arguments[0].left + this.scrollLeft,
top: ~~arguments[0].top + this.scrollTop,
behavior: arguments[0].behavior
}) : h.elementScroll.call(this, void 0 !== arguments[0].left ? ~~arguments[0].left + this.scrollLeft : ~~arguments[0] + this.scrollLeft, void 0 !== arguments[0].top ? ~~arguments[0].top + this.scrollTop : ~~arguments[1] + this.scrollTop))
}, e.prototype.scrollIntoView = function() {
if (!0 !== s(arguments[0])) {
var t = function(t) {
for (; t !== c.body && !1 === (i = n(e = t, "Y") && o(e, "Y"), s = n(e, "X") && o(e, "X"), i || s);) t = t.parentNode || t.host;
var e, i, s;
return t
}(this),
e = t.getBoundingClientRect(),
i = this.getBoundingClientRect();
t !== c.body ? (r.call(this, t, t.scrollLeft + i.left - e.left, t.scrollTop + i.top - e.top), "fixed" !== a.getComputedStyle(t).position && a.scrollBy({
left: e.left,
top: e.top,
behavior: "smooth"
})) : a.scrollBy({
left: i.left,
top: i.top,
behavior: "smooth"
})
} else h.scrollIntoView.call(this, void 0 === arguments[0] || arguments[0])
}
}
function u(t, e) {
this.scrollLeft = t, this.scrollTop = e
}
function s(t) {
if (null === t || "object" != typeof t || void 0 === t.behavior || "auto" === t.behavior || "instant" === t.behavior) return !0;
if ("object" == typeof t && "smooth" === t.behavior) return !1;
throw new TypeError("behavior member of ScrollOptions " + t.behavior + " is not a valid value for enumeration ScrollBehavior.")
}
function n(t, e) {
return "Y" === e ? t.clientHeight + i < t.scrollHeight : "X" === e ? t.clientWidth + i < t.scrollWidth : void 0
}
function o(t, e) {
var i = a.getComputedStyle(t, null)["overflow" + e];
return "auto" === i || "scroll" === i
}
function f(t) {
var e, i, s, n, o = (d() - t.startTime) / l;
n = o = 1 < o ? 1 : o, e = .5 * (1 - Math.cos(Math.PI * n)), i = t.startX + (t.x - t.startX) * e, s = t.startY + (t.y - t.startY) * e, t.method.call(t.scrollable, i, s), i === t.x && s === t.y || a.requestAnimationFrame(f.bind(a, t))
}
function r(t, e, i) {
var s, n, o, l, r = d();
l = t === c.body ? (n = (s = a).scrollX || a.pageXOffset, o = a.scrollY || a.pageYOffset, h.scroll) : (n = (s = t).scrollLeft, o = t.scrollTop, u), f({
scrollable: s,
method: l,
startTime: r,
startX: n,
startY: o,
x: e,
y: i
})
}
}
}
}).polyfill;
var m = function(t) {
function i() {
var t, e = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
return s(this, i), (t = h(this, r(i).call(this, e))).resetNativeScroll && (history.scrollRestoration && (history.scrollRestoration = "manual"), window.scrollTo(0, 0)), window.addEventListener("scroll", t.checkScroll, !1), t
}
return l(i, f), o(i, [{
key: "init",
value: function() {
this.instance.scroll.y = window.pageYOffset, this.addElements(), this.detectElements(), d(r(i.prototype), "init", this).call(this)
}
}, {
key: "checkScroll",
value: function() {
var t = this;
d(r(i.prototype), "checkScroll", this).call(this), this.getDirection && this.addDirection(), this.getSpeed && (this.addSpeed(), this.speedTs = Date.now()), this.instance.scroll.y = window.pageYOffset, Object.entries(this.els).length && (this.hasScrollTicking || (requestAnimationFrame(function() {
t.detectElements()
}), this.hasScrollTicking = !0))
}
}, {
key: "addDirection",
value: function() {
window.pageYOffset > this.instance.scroll.y ? "down" !== this.instance.direction && (this.instance.direction = "down") : window.pageYOffset < this.instance.scroll.y && "up" !== this.instance.direction && (this.instance.direction = "up")
}
}, {
key: "addSpeed",
value: function() {
window.pageYOffset != this.instance.scroll.y ? this.instance.speed = (window.pageYOffset - this.instance.scroll.y) / Math.max(1, Date.now() - this.speedTs) : this.instance.speed = 0
}
}, {
key: "resize",
value: function() {
Object.entries(this.els).length && (this.windowHeight = window.innerHeight, this.updateElements())
}
}, {
key: "addElements",
value: function() {
var p = this;
this.els = {}, this.el.querySelectorAll("[data-" + this.name + "]").forEach(function(t, e) {
var i = t.getBoundingClientRect(),
s = t.dataset[p.name + "Class"] || p.class,
n = "string" == typeof t.dataset[p.name + "Id"] ? t.dataset[p.name + "Id"] : e,
o = i.top + p.instance.scroll.y,
l = i.left,
r = i.right,
a = o + t.offsetHeight,
c = "string" == typeof t.dataset[p.name + "Offset"] ? t.dataset[p.name + "Offset"].split(",") : p.offset,
h = t.dataset[p.name + "Repeat"],
d = t.dataset[p.name + "Call"];
h = "false" != h && (null != h || p.repeat);
var u = p.getRelativeOffset(c),
f = {
el: t,
id: n,
class: s,
top: o + u[0],
bottom: a - u[1],
left: l,
right: r,
offset: c,
progress: 0,
repeat: h,
inView: !1,
call: d
};
p.els[n] = f, t.classList.contains(s) && p.setInView(p.els[n], n)
})
}
}, {
key: "updateElements",
value: function() {
var r = this;
Object.entries(this.els).forEach(function(t) {
var e = L(t, 2),
i = e[0],
s = e[1],
n = s.el.getBoundingClientRect().top + r.instance.scroll.y,
o = n + s.el.offsetHeight,
l = r.getRelativeOffset(s.offset);
r.els[i].top = n + l[0], r.els[i].bottom = o - l[1]
}), this.hasScrollTicking = !1
}
}, {
key: "getRelativeOffset",
value: function(t) {
var e = [0, 0];
if (t)
for (var i = 0; i < t.length; i++) "string" == typeof t[i] ? t[i].includes("%") ? e[i] = parseInt(t[i].replace("%", "") * this.windowHeight / 100) : e[i] = parseInt(t[i]) : e[i] = t[i];
return e
}
}, {
key: "scrollTo",
value: function(t) {
var e = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : {},
i = parseInt(e.offset) || 0,
s = !!e.callback && e.callback;
if ("string" == typeof t) {
if ("top" === t) t = this.html;
else if ("bottom" === t) t = this.html.offsetHeight - window.innerHeight;
else if (!(t = document.querySelector(t))) return
} else if ("number" == typeof t) t = parseInt(t);
else if (!t || !t.tagName) return void console.warn("`target` parameter is not valid");
if (i = "number" != typeof t ? t.getBoundingClientRect().top + i + this.instance.scroll.y : t + i, s) {
i = i.toFixed();
window.addEventListener("scroll", function t() {
window.pageYOffset.toFixed() === i && (window.removeEventListener("scroll", t), s())
})
}
window.scrollTo({
top: i,
behavior: "smooth"
})
}
}, {
key: "update",
value: function() {
this.addElements(), this.detectElements()
}
}, {
key: "destroy",
value: function() {
d(r(i.prototype), "destroy", this).call(this), window.removeEventListener("scroll", this.checkScroll, !1)
}
}]), i
}(),
v = Object.getOwnPropertySymbols,
g = Object.prototype.hasOwnProperty,
b = Object.prototype.propertyIsEnumerable;
var w = function() {
try {
if (!Object.assign) return !1;
var t = new String("abc");
if (t[5] = "de", "5" === Object.getOwnPropertyNames(t)[0]) return !1;
for (var e = {}, i = 0; i < 10; i++) e["_" + String.fromCharCode(i)] = i;
if ("0123456789" !== Object.getOwnPropertyNames(e).map(function(t) {
return e[t]
}).join("")) return !1;
var s = {};
return "abcdefghijklmnopqrst".split("").forEach(function(t) {
s[t] = t
}), "abcdefghijklmnopqrst" === Object.keys(Object.assign({}, s)).join("")
} catch (t) {
return !1
}
}() ? Object.assign : function(t, e) {
for (var i, s, n = function(t) {
if (null == t) throw new TypeError("Object.assign cannot be called with null or undefined");
return Object(t)
}(t), o = 1; o < arguments.length; o++) {
for (var l in i = Object(arguments[o])) g.call(i, l) && (n[l] = i[l]);
if (v) {
s = v(i);
for (var r = 0; r < s.length; r++) b.call(i, s[r]) && (n[s[r]] = i[s[r]])
}
}
return n
};
function x() {}
x.prototype = {
on: function(t, e, i) {
var s = this.e || (this.e = {});
return (s[t] || (s[t] = [])).push({
fn: e,
ctx: i
}), this
},
once: function(t, e, i) {
var s = this;
function n() {
s.off(t, n), e.apply(i, arguments)
}
return n._ = e, this.on(t, n, i)
},
emit: function(t) {
for (var e = [].slice.call(arguments, 1), i = ((this.e || (this.e = {}))[t] || []).slice(), s = 0, n = i.length; s < n; s++) i[s].fn.apply(i[s].ctx, e);
return this
},
off: function(t, e) {
var i = this.e || (this.e = {}),
s = i[t],
n = [];
if (s && e)
for (var o = 0, l = s.length; o < l; o++) s[o].fn !== e && s[o].fn._ !== e && n.push(s[o]);
return n.length ? i[t] = n : delete i[t], this
}
};
var S = x,
k = t(function(t, e) {
(function() {
(null !== e ? e : this).Lethargy = function() {
function t(t, e, i, s) {
this.stability = null != t ? Math.abs(t) : 8, this.sensitivity = null != e ? 1 + Math.abs(e) : 100, this.tolerance = null != i ? 1 + Math.abs(i) : 1.1, this.delay = null != s ? s : 150, this.lastUpDeltas = function() {
var t, e, i;
for (i = [], t = 1, e = 2 * this.stability; 1 <= e ? t <= e : e <= t; 1 <= e ? t++ : t--) i.push(null);
return i
}.call(this), this.lastDownDeltas = function() {
var t, e, i;
for (i = [], t = 1, e = 2 * this.stability; 1 <= e ? t <= e : e <= t; 1 <= e ? t++ : t--) i.push(null);
return i
}.call(this), this.deltasTimestamp = function() {
var t, e, i;
for (i = [], t = 1, e = 2 * this.stability; 1 <= e ? t <= e : e <= t; 1 <= e ? t++ : t--) i.push(null);
return i
}.call(this)
}
return t.prototype.check = function(t) {
var e;
return null != (t = t.originalEvent || t).wheelDelta ? e = t.wheelDelta : null != t.deltaY ? e = -40 * t.deltaY : null == t.detail && 0 !== t.detail || (e = -40 * t.detail), this.deltasTimestamp.push(Date.now()), this.deltasTimestamp.shift(), 0 < e ? (this.lastUpDeltas.push(e), this.lastUpDeltas.shift(), this.isInertia(1)) : (this.lastDownDeltas.push(e), this.lastDownDeltas.shift(), this.isInertia(-1))
}, t.prototype.isInertia = function(t) {
var e, i, s, n, o, l, r;
return null === (e = -1 === t ? this.lastDownDeltas : this.lastUpDeltas)[0] ? t : !(this.deltasTimestamp[2 * this.stability - 2] + this.delay > Date.now() && e[0] === e[2 * this.stability - 1]) && (s = e.slice(0, this.stability), i = e.slice(this.stability, 2 * this.stability), r = s.reduce(function(t, e) {
return t + e
}), o = i.reduce(function(t, e) {
return t + e
}), l = r / s.length, n = o / i.length, Math.abs(l) < Math.abs(n * this.tolerance) && this.sensitivity < Math.abs(n) && t)
}, t.prototype.showLastUpDeltas = function() {
return this.lastUpDeltas
}, t.prototype.showLastDownDeltas = function() {
return this.lastDownDeltas
}, t
}()
}).call(p)
}),
T = {
hasWheelEvent: "onwheel" in document,
hasMouseWheelEvent: "onmousewheel" in document,
hasTouch: "ontouchstart" in window || window.TouchEvent || window.DocumentTouch && document instanceof DocumentTouch,
hasTouchWin: navigator.msMaxTouchPoints && 1 < navigator.msMaxTouchPoints,
hasPointer: !!window.navigator.msPointerEnabled,
hasKeyDown: "onkeydown" in document,
isFirefox: -1 < navigator.userAgent.indexOf("Firefox")
},
E = Object.prototype.toString,
A = Object.prototype.hasOwnProperty;
function O(t, e) {
return function() {
return t.apply(e, arguments)
}
}
var C = k.Lethargy,
D = "virtualscroll",
M = R,
j = 37,
_ = 38,
B = 39,
W = 40,
H = 32;
function R(t) {
! function(t) {
if (!t) return console.warn("bindAll requires at least one argument.");
var e = Array.prototype.slice.call(arguments, 1);
if (0 === e.length)
for (var i in t) A.call(t, i) && "function" == typeof t[i] && "[object Function]" == E.call(t[i]) && e.push(i);
for (var s = 0; s < e.length; s++) {
var n = e[s];
t[n] = O(t[n], t)
}
}(this, "_onWheel", "_onMouseWheel", "_onTouchStart", "_onTouchMove", "_onKeyDown"), this.el = window, t && t.el && (this.el = t.el, delete t.el), this.options = w({
mouseMultiplier: 1,
touchMultiplier: 2,
firefoxMultiplier: 15,
keyStep: 120,
preventTouch: !1,
unpreventTouchClass: "vs-touchmove-allowed",
limitInertia: !1,
useKeyboard: !0,
useTouch: !0
}, t), this.options.limitInertia && (this._lethargy = new C), this._emitter = new S, this._event = {
y: 0,
x: 0,
deltaX: 0,
deltaY: 0
}, this.touchStartX = null, this.touchStartY = null, this.bodyTouchAction = null, void 0 !== this.options.passive && (this.listenerOptions = {
passive: this.options.passive
})
}
function Y(t, e, i) {
return (1 - i) * t + i * e
}
function z(t) {
var e = {};
if (window.getComputedStyle) {
var i = getComputedStyle(t),
s = i.transform || i.webkitTransform || i.mozTransform,
n = s.match(/^matrix3d\((.+)\)$/);
return n ? (e.x = n ? parseFloat(n[1].split(", ")[12]) : 0, e.y = n ? parseFloat(n[1].split(", ")[13]) : 0) : (n = s.match(/^matrix\((.+)\)$/), e.x = n ? parseFloat(n[1].split(", ")[4]) : 0, e.y = n ? parseFloat(n[1].split(", ")[5]) : 0), e
}
}
function P(t) {
for (var e = []; t && t !== document; t = t.parentNode) e.push(t);
return e
}
R.prototype._notify = function(t) {
var e = this._event;
e.x += e.deltaX, e.y += e.deltaY, this._emitter.emit(D, {
x: e.x,
y: e.y,
deltaX: e.deltaX,
deltaY: e.deltaY,
originalEvent: t
})
}, R.prototype._onWheel = function(t) {
var e = this.options;
if (!this._lethargy || !1 !== this._lethargy.check(t)) {
var i = this._event;
i.deltaX = t.wheelDeltaX || -1 * t.deltaX, i.deltaY = t.wheelDeltaY || -1 * t.deltaY, T.isFirefox && 1 == t.deltaMode && (i.deltaX *= e.firefoxMultiplier, i.deltaY *= e.firefoxMultiplier), i.deltaX *= e.mouseMultiplier, i.deltaY *= e.mouseMultiplier, this._notify(t)
}
}, R.prototype._onMouseWheel = function(t) {
if (!this.options.limitInertia || !1 !== this._lethargy.check(t)) {
var e = this._event;
e.deltaX = t.wheelDeltaX ? t.wheelDeltaX : 0, e.deltaY = t.wheelDeltaY ? t.wheelDeltaY : t.wheelDelta, this._notify(t)
}
}, R.prototype._onTouchStart = function(t) {
var e = t.targetTouches ? t.targetTouches[0] : t;
this.touchStartX = e.pageX, this.touchStartY = e.pageY
}, R.prototype._onTouchMove = function(t) {
var e = this.options;
e.preventTouch && !t.target.classList.contains(e.unpreventTouchClass) && t.preventDefault();
var i = this._event,
s = t.targetTouches ? t.targetTouches[0] : t;
i.deltaX = (s.pageX - this.touchStartX) * e.touchMultiplier, i.deltaY = (s.pageY - this.touchStartY) * e.touchMultiplier, this.touchStartX = s.pageX, this.touchStartY = s.pageY, this._notify(t)
}, R.prototype._onKeyDown = function(t) {
var e = this._event;
e.deltaX = e.deltaY = 0;
var i = window.innerHeight - 40;
switch (t.keyCode) {
case j:
case _:
e.deltaY = this.options.keyStep;
break;
case B:
case W:
e.deltaY = -this.options.keyStep;
break;
case t.shiftKey:
e.deltaY = i;
break;
case H:
e.deltaY = -i;
break;
default:
return
}
this._notify(t)
}, R.prototype._bind = function() {
T.hasWheelEvent && this.el.addEventListener("wheel", this._onWheel, this.listenerOptions), T.hasMouseWheelEvent && this.el.addEventListener("mousewheel", this._onMouseWheel, this.listenerOptions), T.hasTouch && this.options.useTouch && (this.el.addEventListener("touchstart", this._onTouchStart, this.listenerOptions), this.el.addEventListener("touchmove", this._onTouchMove, this.listenerOptions)), T.hasPointer && T.hasTouchWin && (this.bodyTouchAction = document.body.style.msTouchAction, document.body.style.msTouchAction = "none", this.el.addEventListener("MSPointerDown", this._onTouchStart, !0), this.el.addEventListener("MSPointerMove", this._onTouchMove, !0)), T.hasKeyDown && this.options.useKeyboard && document.addEventListener("keydown", this._onKeyDown)
}, R.prototype._unbind = function() {
T.hasWheelEvent && this.el.removeEventListener("wheel", this._onWheel), T.hasMouseWheelEvent && this.el.removeEventListener("mousewheel", this._onMouseWheel), T.hasTouch && (this.el.removeEventListener("touchstart", this._onTouchStart), this.el.removeEventListener("touchmove", this._onTouchMove)), T.hasPointer && T.hasTouchWin && (document.body.style.msTouchAction = this.bodyTouchAction, this.el.removeEventListener("MSPointerDown", this._onTouchStart, !0), this.el.removeEventListener("MSPointerMove", this._onTouchMove, !0)), T.hasKeyDown && this.options.useKeyboard && document.removeEventListener("keydown", this._onKeyDown)
}, R.prototype.on = function(t, e) {
this._emitter.on(D, t, e);
var i = this._emitter.e;
i && i[D] && 1 === i[D].length && this._bind()
}, R.prototype.off = function(t, e) {
this._emitter.off(D, t, e);
var i = this._emitter.e;
(!i[D] || i[D].length <= 0) && this._unbind()
}, R.prototype.reset = function() {
var t = this._event;
t.x = 0, t.y = 0
}, R.prototype.destroy = function() {
this._emitter.off(), this._unbind()
};
var I = 4,
X = 1e-7,
V = 10,
F = "function" == typeof Float32Array;
function q(t, e) {
return 1 - 3 * e + 3 * t
}
function K(t, e) {
return 3 * e - 6 * t
}
function N(t) {
return 3 * t
}
function U(t, e, i) {
return ((q(e, i) * t + K(e, i)) * t + N(e)) * t
}
function $(t, e, i) {
return 3 * q(e, i) * t * t + 2 * K(e, i) * t + N(e)
}
function G(t) {
return t
}
var J = function(o, e, l, i) {
if (!(0 <= o && o <= 1 && 0 <= l && l <= 1)) throw new Error("bezier x values must be in [0, 1] range");
if (o === e && l === i) return G;
for (var r = F ? new Float32Array(11) : new Array(11), t = 0; t < 11; ++t) r[t] = U(.1 * t, o, l);
function s(t) {
for (var e = 0, i = 1; 10 !== i && r[i] <= t; ++i) e += .1;
var s = e + .1 * ((t - r[--i]) / (r[i + 1] - r[i])),
n = $(s, o, l);
return .001 <= n ? function(t, e, i, s) {
for (var n = 0; n < I; ++n) {
var o = $(e, i, s);
if (0 === o) return e;
e -= (U(e, i, s) - t) / o
}
return e
}(t, s, o, l) : 0 === n ? s : function(t, e, i, s, n) {
for (var o, l, r = 0; 0 < (o = U(l = e + (i - e) / 2, s, n) - t) ? i = l : e = l, Math.abs(o) > X && ++r < V;);
return l
}(t, e, e + .1, o, l)
}
return function(t) {
return 0 === t ? 0 : 1 === t ? 1 : U(s(t), e, i)
}
},
Q = 38,
Z = 40,
tt = 32,
et = 9,
it = 33,
st = 34,
nt = 36,
ot = 35,
lt = function(t) {
function n() {
var t, e = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
return s(this, n), history.scrollRestoration && (history.scrollRestoration = "manual"), window.scrollTo(0, 0), (t = h(this, r(n).call(this, e))).inertia && (t.lerp = .1 * t.inertia), t.isScrolling = !1, t.isDraggingScrollbar = !1, t.isTicking = !1, t.hasScrollTicking = !1, t.parallaxElements = {}, t.stop = !1, t.scrollbarContainer = e.scrollbarContainer, t.checkKey = t.checkKey.bind(c(t)), window.addEventListener("keydown", t.checkKey, !1), t
}
return l(n, f), o(n, [{
key: "init",
value: function() {
var e = this;
this.html.classList.add(this.smoothClass), this.html.setAttribute("data-".concat(this.name, "-direction"), this.direction), this.instance = i({
delta: {
x: 0,
y: 0
}
}, this.instance), this.vs = new M({
el: this.scrollFromAnywhere ? document : this.el,
mouseMultiplier: -1 < navigator.platform.indexOf("Win") ? 1 : .4,
firefoxMultiplier: this.firefoxMultiplier,
touchMultiplier: this.touchMultiplier,
useKeyboard: !1,
passive: !0
}), this.vs.on(function(t) {
e.stop || e.isDraggingScrollbar || requestAnimationFrame(function() {
e.updateDelta(t), e.isScrolling || e.startScrolling()
})
}), this.setScrollLimit(), this.initScrollBar(), this.addSections(), this.addElements(), this.checkScroll(!0), this.transformElements(!0, !0), d(r(n.prototype), "init", this).call(this)
}
}, {
key: "setScrollLimit",
value: function() {
if (this.instance.limit.y = this.el.offsetHeight - this.windowHeight, "horizontal" === this.direction) {
for (var t = 0, e = this.el.children, i = 0; i < e.length; i++) t += e[i].offsetWidth;
this.instance.limit.x = t - this.windowWidth
}
}
}, {
key: "startScrolling",
value: function() {
this.startScrollTs = Date.now(), this.isScrolling = !0, this.checkScroll(), this.html.classList.add(this.scrollingClass)
}
}, {
key: "stopScrolling",
value: function() {
cancelAnimationFrame(this.checkScrollRaf), this.scrollToRaf && (cancelAnimationFrame(this.scrollToRaf), this.scrollToRaf = null), this.isScrolling = !1, this.instance.scroll.y = Math.round(this.instance.scroll.y), this.html.classList.remove(this.scrollingClass)
}
}, {
key: "checkKey",
value: function(t) {
var e = this;
if (this.stop) t.keyCode == et && requestAnimationFrame(function() {
e.html.scrollTop = 0, document.body.scrollTop = 0, e.html.scrollLeft = 0, document.body.scrollLeft = 0
});
else {
switch (t.keyCode) {
case et:
requestAnimationFrame(function() {
e.html.scrollTop = 0, document.body.scrollTop = 0, e.html.scrollLeft = 0, document.body.scrollLeft = 0, e.scrollTo(document.activeElement, -window.innerHeight / 2)
});
break;
case Q:
this.instance.delta[this.directionAxis] -= 240;
break;
case Z:
this.instance.delta[this.directionAxis] += 240;
break;
case it:
this.instance.delta[this.directionAxis] -= window.innerHeight;
break;
case st:
this.instance.delta[this.directionAxis] += window.innerHeight;
break;
case nt:
this.instance.delta[this.directionAxis] -= this.instance.limit[this.directionAxis];
break;
case ot:
this.instance.delta[this.directionAxis] += this.instance.limit[this.directionAxis];
break;
case tt:
document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement || (t.shiftKey ? this.instance.delta[this.directionAxis] -= window.innerHeight : this.instance.delta[this.directionAxis] += window.innerHeight);
break;
default:
return
}
this.instance.delta[this.directionAxis] < 0 && (this.instance.delta[this.directionAxis] = 0), this.instance.delta[this.directionAxis] > this.instance.limit && (this.instance.delta[this.directionAxis] = this.instance.limit), this.isScrolling = !0, this.checkScroll(), this.html.classList.add(this.scrollingClass)
}
}
}, {
key: "checkScroll",
value: function() {
var s = this;
if (0 < arguments.length && void 0 !== arguments[0] && arguments[0] || this.isScrolling || this.isDraggingScrollbar) {
this.hasScrollTicking || (this.checkScrollRaf = requestAnimationFrame(function() {
return s.checkScroll()
}), this.hasScrollTicking = !0), this.updateScroll();
var t = Math.abs(this.instance.delta[this.directionAxis] - this.instance.scroll[this.directionAxis]),
e = Date.now() - this.startScrollTs;
if (!this.animatingScroll && 100 < e && (t < .5 && 0 != this.instance.delta[this.directionAxis] || t < .5 && 0 == this.instance.delta[this.directionAxis]) && this.stopScrolling(), Object.entries(this.sections).forEach(function(t) {
var e = L(t, 2),
i = (e[0], e[1]);
i.persistent || s.instance.scroll[s.directionAxis] > i.offset[s.directionAxis] && s.instance.scroll[s.directionAxis] < i.limit[s.directionAxis] ? ("horizontal" === s.direction ? s.transform(i.el, -s.instance.scroll[s.directionAxis], 0) : s.transform(i.el, 0, -s.instance.scroll[s.directionAxis]), i.inView || (i.inView = !0, i.el.style.opacity = 1, i.el.style.pointerEvents = "all", i.el.setAttribute("data-".concat(s.name, "-section-inview"), ""))) : (i.inView && (i.inView = !1, i.el.style.opacity = 0, i.el.style.pointerEvents = "none", i.el.removeAttribute("data-".concat(s.name, "-section-inview"))), s.transform(i.el, 0, 0))
}), this.getDirection && this.addDirection(), this.getSpeed && (this.addSpeed(), this.speedTs = Date.now()), this.detectElements(), this.transformElements(), this.hasScrollbar) {
var i = this.instance.scroll[this.directionAxis] / this.instance.limit[this.directionAxis] * this.scrollBarLimit[this.directionAxis];
"horizontal" === this.direction ? this.transform(this.scrollbarThumb, i, 0) : this.transform(this.scrollbarThumb, 0, i)
}
d(r(n.prototype), "checkScroll", this).call(this), this.hasScrollTicking = !1
}
}
}, {
key: "resize",
value: function() {
this.windowHeight = window.innerHeight, this.windowWidth = window.innerWidth, this.checkContext(), this.windowMiddle = {
x: this.windowWidth / 2,
y: this.windowHeight / 2
}, this.update()
}
}, {
key: "updateDelta",
value: function(t) {
var e, i = this[this.context] && this[this.context].gestureDirection ? this[this.context].gestureDirection : this.gestureDirection;
e = "both" === i ? t.deltaX + t.deltaY : "vertical" === i ? t.deltaY : "horizontal" === i ? t.deltaX : t.deltaY, this.instance.delta[this.directionAxis] -= e * this.multiplier, this.instance.delta[this.directionAxis] < 0 && (this.instance.delta[this.directionAxis] = 0), this.instance.delta[this.directionAxis] > this.instance.limit[this.directionAxis] && (this.instance.delta[this.directionAxis] = this.instance.limit[this.directionAxis])
}
}, {
key: "updateScroll",
value: function(t) {
this.isScrolling || this.isDraggingScrollbar ? this.instance.scroll[this.directionAxis] = Y(this.instance.scroll[this.directionAxis], this.instance.delta[this.directionAxis], this.lerp) : this.instance.scroll[this.directionAxis] > this.instance.limit[this.directionAxis] ? this.setScroll(this.instance.scroll[this.directionAxis], this.instance.limit[this.directionAxis]) : this.instance.scroll.y < 0 ? this.setScroll(this.instance.scroll[this.directionAxis], 0) : this.setScroll(this.instance.scroll[this.directionAxis], this.instance.delta[this.directionAxis])
}
}, {
key: "addDirection",
value: function() {
this.instance.delta.y > this.instance.scroll.y ? "down" !== this.instance.direction && (this.instance.direction = "down") : this.instance.delta.y < this.instance.scroll.y && "up" !== this.instance.direction && (this.instance.direction = "up"), this.instance.delta.x > this.instance.scroll.x ? "right" !== this.instance.direction && (this.instance.direction = "right") : this.instance.delta.x < this.instance.scroll.x && "left" !== this.instance.direction && (this.instance.direction = "left")
}
}, {
key: "addSpeed",
value: function() {
this.instance.delta[this.directionAxis] != this.instance.scroll[this.directionAxis] ? this.instance.speed = (this.instance.delta[this.directionAxis] - this.instance.scroll[this.directionAxis]) / Math.max(1, Date.now() - this.speedTs) : this.instance.speed = 0
}
}, {
key: "initScrollBar",
value: function() {
if (this.scrollbar = document.createElement("span"), this.scrollbarThumb = document.createElement("span"), this.scrollbar.classList.add("".concat(this.scrollbarClass)), this.scrollbarThumb.classList.add("".concat(this.scrollbarClass, "_thumb")), this.scrollbar.append(this.scrollbarThumb), this.scrollbarContainer ? this.scrollbarContainer.append(this.scrollbar) : document.body.append(this.scrollbar), this.getScrollBar = this.getScrollBar.bind(this), this.releaseScrollBar = this.releaseScrollBar.bind(this), this.moveScrollBar = this.moveScrollBar.bind(this), this.scrollbarThumb.addEventListener("mousedown", this.getScrollBar), window.addEventListener("mouseup", this.releaseScrollBar), window.addEventListener("mousemove", this.moveScrollBar), this.hasScrollbar = !1, "horizontal" == this.direction) {
if (this.instance.limit.x + this.windowWidth <= this.windowWidth) return
} else if (this.instance.limit.y + this.windowHeight <= this.windowHeight) return;
this.hasScrollbar = !0, this.scrollbarBCR = this.scrollbar.getBoundingClientRect(), this.scrollbarHeight = this.scrollbarBCR.height, this.scrollbarWidth = this.scrollbarBCR.width, "horizontal" === this.direction ? this.scrollbarThumb.style.width = "".concat(this.scrollbarWidth * this.scrollbarWidth / (this.instance.limit.x + this.scrollbarWidth), "px") : this.scrollbarThumb.style.height = "".concat(this.scrollbarHeight * this.scrollbarHeight / (this.instance.limit.y + this.scrollbarHeight), "px"), this.scrollbarThumbBCR = this.scrollbarThumb.getBoundingClientRect(), this.scrollBarLimit = {
x: this.scrollbarWidth - this.scrollbarThumbBCR.width,
y: this.scrollbarHeight - this.scrollbarThumbBCR.height
}
}
}, {
key: "reinitScrollBar",
value: function() {
if (this.hasScrollbar = !1, "horizontal" == this.direction) {
if (this.instance.limit.x + this.windowWidth <= this.windowWidth) return
} else if (this.instance.limit.y + this.windowHeight <= this.windowHeight) return;
this.hasScrollbar = !0, this.scrollbarBCR = this.scrollbar.getBoundingClientRect(), this.scrollbarHeight = this.scrollbarBCR.height, this.scrollbarWidth = this.scrollbarBCR.width, "horizontal" === this.direction ? this.scrollbarThumb.style.width = "".concat(this.scrollbarWidth * this.scrollbarWidth / (this.instance.limit.x + this.scrollbarWidth), "px") : this.scrollbarThumb.style.height = "".concat(this.scrollbarHeight * this.scrollbarHeight / (this.instance.limit.y + this.scrollbarHeight), "px"), this.scrollbarThumbBCR = this.scrollbarThumb.getBoundingClientRect(), this.scrollBarLimit = {
x: this.scrollbarWidth - this.scrollbarThumbBCR.width,
y: this.scrollbarHeight - this.scrollbarThumbBCR.height
}
}
}, {
key: "destroyScrollBar",
value: function() {
this.scrollbarThumb.removeEventListener("mousedown", this.getScrollBar), window.removeEventListener("mouseup", this.releaseScrollBar), window.removeEventListener("mousemove", this.moveScrollBar), this.scrollbar.remove()
}
}, {
key: "getScrollBar",
value: function(t) {
this.isDraggingScrollbar = !0, this.checkScroll(), this.html.classList.remove(this.scrollingClass), this.html.classList.add(this.draggingClass)
}
}, {
key: "releaseScrollBar",
value: function(t) {
this.isDraggingScrollbar = !1, this.html.classList.add(this.scrollingClass), this.html.classList.remove(this.draggingClass)
}
}, {
key: "moveScrollBar",
value: function(i) {
var s = this;
this.isDraggingScrollbar && requestAnimationFrame(function() {
var t = 100 * (i.clientX - s.scrollbarBCR.left) / s.scrollbarWidth * s.instance.limit.x / 100,
e = 100 * (i.clientY - s.scrollbarBCR.top) / s.scrollbarHeight * s.instance.limit.y / 100;
0 < e && e < s.instance.limit.y && (s.instance.delta.y = e), 0 < t && t < s.instance.limit.x && (s.instance.delta.x = t)
})
}
}, {
key: "addElements",
value: function() {
var D = this;
this.els = {}, this.parallaxElements = {}, this.el.querySelectorAll("[data-".concat(this.name, "]")).forEach(function(t, e) {
var i, s, n, o = P(t),
l = Object.entries(D.sections).map(function(t) {
var e = L(t, 2);
e[0];
return e[1]
}).find(function(t) {
return o.includes(t.el)
}),
r = t.dataset[D.name + "Class"] || D.class,
a = "string" == typeof t.dataset[D.name + "Id"] ? t.dataset[D.name + "Id"] : "el" + e,
c = t.dataset[D.name + "Repeat"],
h = t.dataset[D.name + "Call"],
d = t.dataset[D.name + "Position"],
u = t.dataset[D.name + "Delay"],
f = t.dataset[D.name + "Direction"],
p = "string" == typeof t.dataset[D.name + "Sticky"],
m = !!t.dataset[D.name + "Speed"] && parseFloat(t.dataset[D.name + "Speed"]) / 10,
v = "string" == typeof t.dataset[D.name + "Offset"] ? t.dataset[D.name + "Offset"].split(",") : D.offset,
y = t.dataset[D.name + "Target"],
g = (n = void 0 !== y ? document.querySelector("".concat(y)) : t).getBoundingClientRect();
s = null === l ? (i = g.top + D.instance.scroll.y - z(n).y, g.left + D.instance.scroll.x - z(n).x) : l.inView ? (i = g.top + D.instance.scroll.y - z(n).y, g.left + D.instance.scroll.x - z(n).x) : (i = g.top - z(l.el).y - z(n).y, g.left - z(l.el).x - z(n).x);
var b = i + n.offsetHeight,
w = s + n.offsetWidth,
x = {
x: (w - s) / 2 + s,
y: (b - i) / 2 + i
};
if (p) {
var S = t.getBoundingClientRect(),
k = S.top,
T = S.left,
E = {
x: T - s,
y: k - i
};
i += window.innerHeight, s += window.innerWidth, b = k + n.offsetHeight - t.offsetHeight - E[D.directionAxis], x = {
x: ((w = T + n.offsetWidth - t.offsetWidth - E[D.directionAxis]) - s) / 2 + s,
y: (b - i) / 2 + i
}
}
c = "false" != c && (null != c || D.repeat);
var A = [0, 0];
if (v)
if ("horizontal" === D.direction) {
for (var O = 0; O < v.length; O++) "string" == typeof v[O] ? v[O].includes("%") ? A[O] = parseInt(v[O].replace("%", "") * D.windowWidth / 100) : A[O] = parseInt(v[O]) : A[O] = v[O];
s += A[0], w -= A[1]
} else {
for (O = 0; O < v.length; O++) "string" == typeof v[O] ? v[O].includes("%") ? A[O] = parseInt(v[O].replace("%", "") * D.windowHeight / 100) : A[O] = parseInt(v[O]) : A[O] = v[O];
i += A[0], b -= A[1]
}
var C = {
el: t,
id: a,
class: r,
section: l,
top: i,
middle: x,
bottom: b,
left: s,
right: w,
offset: v,
progress: 0,
repeat: c,
inView: !1,
call: h,
speed: m,
delay: u,
position: d,
target: n,
direction: f,
sticky: p
};
D.els[a] = C, t.classList.contains(r) && D.setInView(D.els[a], a), (!1 !== m || p) && (D.parallaxElements[a] = C)
})
}
}, {
key: "addSections",
value: function() {
var a = this;
this.sections = {};
var t = this.el.querySelectorAll("[data-".concat(this.name, "-section]"));
0 === t.length && (t = [this.el]), t.forEach(function(t, e) {
var i = "string" == typeof t.dataset[a.name + "Id"] ? t.dataset[a.name + "Id"] : "section" + e,
s = t.getBoundingClientRect(),
n = {
x: s.left - 1.5 * window.innerWidth - z(t).x,
y: s.top - 1.5 * window.innerHeight - z(t).y
},
o = {
x: n.x + s.width + 2 * window.innerWidth,
y: n.y + s.height + 2 * window.innerHeight
},
l = "string" == typeof t.dataset[a.name + "Persistent"];
t.setAttribute("data-scroll-section-id", i);
var r = {
el: t,
offset: n,
limit: o,
inView: !1,
persistent: l,
id: i
};
a.sections[i] = r
})
}
}, {
key: "transform",
value: function(t, e, i, s) {
var n;
if (s) {
var o = z(t),
l = Y(o.x, e, s),
r = Y(o.y, i, s);
n = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(l, ",").concat(r, ",0,1)")
} else n = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(e, ",").concat(i, ",0,1)");
t.style.webkitTransform = n, t.style.msTransform = n, t.style.transform = n
}
}, {
key: "transformElements",
value: function(n) {
var o = this,
l = 1 < arguments.length && void 0 !== arguments[1] && arguments[1],
r = this.instance.scroll.x + this.windowWidth,
a = this.instance.scroll.y + this.windowHeight,
c = {
x: this.instance.scroll.x + this.windowMiddle.x,
y: this.instance.scroll.y + this.windowMiddle.y
};
Object.entries(this.parallaxElements).forEach(function(t) {
var e = L(t, 2),
i = (e[0], e[1]),
s = !1;
if (n && (s = 0), i.inView || l) switch (i.position) {
case "top":
s = o.instance.scroll[o.directionAxis] * -i.speed;
break;
case "elementTop":
s = (a - i.top) * -i.speed;
break;
case "bottom":
s = (o.instance.limit[o.directionAxis] - a + o.windowHeight) * i.speed;
break;
case "left":
s = o.instance.scroll[o.directionAxis] * -i.speed;
break;
case "elementLeft":
s = (r - i.left) * -i.speed;
break;
case "right":
s = (o.instance.limit[o.directionAxis] - r + o.windowHeight) * i.speed;
break;
default:
s = (c[o.directionAxis] - i.middle[o.directionAxis]) * -i.speed
}
i.sticky && (s = i.inView ? "horizontal" === o.direction ? o.instance.scroll.x - i.left + window.innerWidth : o.instance.scroll.y - i.top + window.innerHeight : "horizontal" === o.direction ? o.instance.scroll.x < i.left - window.innerWidth && o.instance.scroll.x < i.left - window.innerWidth / 2 ? 0 : o.instance.scroll.x > i.right && o.instance.scroll.x > i.right + 100 && i.right - i.left + window.innerWidth : o.instance.scroll.y < i.top - window.innerHeight && o.instance.scroll.y < i.top - window.innerHeight / 2 ? 0 : o.instance.scroll.y > i.bottom && o.instance.scroll.y > i.bottom + 100 && i.bottom - i.top + window.innerHeight), !1 !== s && ("horizontal" === i.direction || "horizontal" === o.direction && "vertical" !== i.direction ? o.transform(i.el, s, 0, !n && i.delay) : o.transform(i.el, 0, s, !n && i.delay))
})
}
}, {
key: "scrollTo",
value: function(t) {
var i = this,
e = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : {},
s = parseInt(e.offset) || 0,
n = e.duration || 1e3,
o = e.easing || [.25, 0, .35, 1],
l = !!e.disableLerp,
r = !!e.callback && e.callback;
if (o = J.apply(void 0, y(o)), "string" == typeof t) {
if ("top" === t) t = 0;
else if ("bottom" === t) t = this.instance.limit.y;
else if ("left" === t) t = 0;
else if ("right" === t) t = this.instance.limit.x;
else if (!(t = document.querySelector(t))) return
} else if ("number" == typeof t) t = parseInt(t);
else if (!t || !t.tagName) return void console.warn("`target` parameter is not valid");
if ("number" != typeof t) {
if (!P(t).includes(this.el)) return;
var a = t.getBoundingClientRect(),
c = a.top,
h = a.left,
d = P(t).find(function(e) {
return Object.entries(i.sections).map(function(t) {
var e = L(t, 2);
e[0];
return e[1]
}).find(function(t) {
return t.el == e
})
}),
u = 0;
u = d ? z(d)[this.directionAxis] : -this.instance.scroll[this.directionAxis], s = "horizontal" === this.direction ? h + s - u : c + s - u
} else s = t + s;
var f = parseFloat(this.instance.delta[this.directionAxis]),
p = Math.max(0, Math.min(s, this.instance.limit[this.directionAxis])) - f,
m = function(t) {
l ? "horizontal" === i.direction ? i.setScroll(f + p * t, i.instance.delta.y) : i.setScroll(i.instance.delta.x, f + p * t) : i.instance.delta[i.directionAxis] = f + p * t
};
this.animatingScroll = !0, this.stopScrolling(), this.startScrolling();
var v = Date.now();
! function t() {
var e = (Date.now() - v) / n;
1 < e ? (m(1), i.animatingScroll = !1, 0 == n && i.update(), r && r()) : (i.scrollToRaf = requestAnimationFrame(t), m(o(e)))
}()
}
}, {
key: "update",
value: function() {
this.setScrollLimit(), this.addSections(), this.addElements(), this.detectElements(), this.updateScroll(), this.transformElements(!0), this.reinitScrollBar(), this.checkScroll(!0)
}
}, {
key: "startScroll",
value: function() {
this.stop = !1
}
}, {
key: "stopScroll",
value: function() {
this.stop = !0
}
}, {
key: "setScroll",
value: function(t, e) {
this.instance = i({}, this.instance, {
scroll: {
x: t,
y: e
},
delta: {
x: t,
y: e
},
speed: 0
})
}
}, {
key: "destroy",
value: function() {
d(r(n.prototype), "destroy", this).call(this), this.stopScrolling(), this.html.classList.remove(this.smoothClass), this.vs.destroy(), this.destroyScrollBar(), window.removeEventListener("keydown", this.checkKey, !1)
}
}]), n
}(),
rt = function() {
function e() {
var t = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
s(this, e), this.options = t, Object.assign(this, u, t), this.smartphone = u.smartphone, t.smartphone && Object.assign(this.smartphone, t.smartphone), this.tablet = u.tablet, t.tablet && Object.assign(this.tablet, t.tablet), this.smooth || "horizontal" != this.direction || console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible"), this.tablet.smooth || "horizontal" != this.tablet.direction || console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (tablet)"), this.smartphone.smooth || "horizontal" != this.smartphone.direction || console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (smartphone)"), this.init()
}
return o(e, [{
key: "init",
value: function() {
if (this.options.isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || "MacIntel" === navigator.platform && 1 < navigator.maxTouchPoints || window.innerWidth < this.tablet.breakpoint, this.options.isTablet = this.options.isMobile && window.innerWidth >= this.tablet.breakpoint, this.smooth && !this.options.isMobile || this.tablet.smooth && this.options.isTablet || this.smartphone.smooth && this.options.isMobile && !this.options.isTablet ? this.scroll = new lt(this.options) : this.scroll = new m(this.options), this.scroll.init(), window.location.hash) {
var t = window.location.hash.slice(1, window.location.hash.length),
e = document.getElementById(t);
e && this.scroll.scrollTo(e)
}
}
}, {
key: "update",
value: function() {
this.scroll.update()
}
}, {
key: "start",
value: function() {
this.scroll.startScroll()
}
}, {
key: "stop",
value: function() {
this.scroll.stopScroll()
}
}, {
key: "scrollTo",
value: function(t, e) {
this.scroll.scrollTo(t, e)
}
}, {
key: "setScroll",
value: function(t, e) {
this.scroll.setScroll(t, e)
}
}, {
key: "on",
value: function(t, e) {
this.scroll.setEvents(t, e)
}
}, {
key: "off",
value: function(t, e) {
this.scroll.unsetEvents(t, e)
}
}, {
key: "destroy",
value: function() {
this.scroll.destroy()
}
}]), e
}();
! function() {
document.documentElement.classList.add("is-loaded"), document.documentElement.classList.remove("is-loading"), setTimeout(function() {
document.documentElement.classList.add("is-ready")
}, 300);
var t = {
el: document.querySelector("#js-scroll"),
smooth: !0,
getSpeed: !0,
getDirection: !0
};
"true" == document.querySelector("#js-scroll").getAttribute("data-horizontal") && (t.direction = "horizontal", t.gestureDirection = "both", t.tablet = {
smooth: !0,
direction: "horizontal",
horizontalGesture: !0
}, t.smartphone = {
smooth: !1
}, t.reloadOnContextChange = !0), setTimeout(function() {
var i = new rt(t),
n = [],
o = [];
i.on("scroll", function(t) {
var e = 360 * t.scroll.y / t.limit;
i.el.style.backgroundColor = "hsl(".concat(e, ", 11%, 81%)"), n.forEach(function(t) {
t.el.style.backgroundColor = "hsl(".concat(e, ", 11%, 81%)")
}), o.forEach(function(t) {
t.el.style.color = "hsl(".concat(e, ", 11%, 81%)")
}), document.documentElement.setAttribute("data-direction", t.direction)
}), i.on("call", function(t, e, i) {
if ("dynamicBackground" === t)
if ("enter" === e) n.push({
id: i.id,
el: i.el
});
else
for (var s = 0; s < n.length; s++) i.id === n[s].id && n.splice(s, 1);
else if ("dynamicColor" === t)
if ("enter" === e) o.push({
id: i.id,
el: i.el
});
else
for (s = 0; s < o.length; s++) i.id === o[s].id && o.splice(s, 1)
})
}, 1e3)
}()
}();
Also see: Tab Triggers