body {
opacity: 0;
animation: fadeinbody .4s ease-in-out forwards;
}
@keyframes fadeinbody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} .slide-up[data-scroll] {
transition: opacity .5s ease, transform 1.2s cubic-bezier(0, 0.5, 0.25, 1);
}
.slide-up[data-scroll="out"] {
opacity: 0;
transform: translateY(40px);
}
.slide-up[data-scroll="in"] {
opacity: 1;
transform: translateY(0px);
} .fade-in[data-scroll] {
transition: opacity .75s ease;
}
.fade-in[data-scroll="out"] {
opacity: 0;
}
.fade-in[data-scroll="in"] {
opacity: 1;
}
.fade-in-scroll {
opacity: calc(1 + var(--viewport-y));
} .fade-out-scroll {
opacity: calc(1 - var(--visible-y)) !important;
} .scale-in-0 {
transform: scale(calc(1.025 + (.025 * var(--viewport-y))));
}
.scale-in-1 {
transform: scale(calc(1.05 + (.05 * var(--viewport-y))));
}
.scale-in-2 {
transform: scale(calc(1.1 + (.1 * var(--viewport-y))));
}
.scale-in-3 {
transform: scale(calc(1.2 + (.2 * var(--viewport-y))));
}
.scale-in-1-vp {
transform: scale(calc(1 + (.5 * var(--scroll-percent-y))));
}
.scale-in-2-vp {
transform: scale(calc(1 + (.75 * var(--scroll-percent-y))));
} .scale-out-1 {
transform: scale(calc(1 - (.05 * var(--viewport-y))));
}
.scale-out-2 {
transform: scale(calc(1 - (.1 * var(--viewport-y))));
}
.scale-out-3 {
transform: scale(calc(1 - (.2 * var(--viewport-y))));
} .scale-up-to-1-1 {
transform: scale(calc(.9 + (.1 * var(--visible-y))));
}
.scale-up-to-1-2 {
transform: scale(calc(.8 + (.2 * var(--visible-y))));
}
.scale-up-to-1-3 {
transform: scale(calc(.6 + (.4 * var(--visible-y))));
} .scale-down-to-1-1 {
transform: scale(calc(1.1 - (.1 * var(--visible-y))));
}
.scale-down-to-1-2 {
transform: scale(calc(1.2 - (.2 * var(--visible-y))));
}
.scale-down-to-1-3 {
transform: scale(calc(1.4 - (.4 * var(--visible-y))));
} .parallax-up-0 {
transform: translate3d(0, calc(var(--viewport-y) * -2vh), 0);
}
.parallax-up-1 {
transform: translate3d(0, calc(var(--viewport-y) * -5vh), 0);
}
.parallax-up-2 {
transform: translate3d(0, calc(var(--viewport-y) * -10vh), 0);
}
.parallax-up-3 {
transform: translate3d(0, calc(var(--viewport-y) * -20vh), 0);
}
.parallax-up-0-vp {
transform: translate3d(0, calc(var(--scroll-percent-y) * -25vh), 0);
}
.parallax-up-1-vp {
transform: translate3d(0, calc(var(--scroll-percent-y) * -40vh), 0);
} .parallax-down-0 {
transform: translate3d(0, calc(var(--viewport-y) * 2vh), 0);
}
.parallax-down-1 {
transform: translate3d(0, calc(var(--viewport-y) * 5vh), 0);
}
.parallax-down-2 {
transform: translate3d(0, calc(var(--viewport-y) * 10vh), 0);
}
.parallax-down-3 {
transform: translate3d(0, calc(var(--viewport-y) * 20vh), 0);
} .parallax-left-0 {
transform: translate3d(calc(var(--viewport-y) * -2vh), 0, 0);
}
.parallax-left-1 {
transform: translate3d(calc(var(--viewport-y) * -5vh), 0, 0);
}
.parallax-left-2 {
transform: translate3d(calc(var(--viewport-y) * -20vh), 0, 0);
}
.parallax-left-3 {
transform: translate3d(calc(var(--viewport-y) * -40vh), 0, 0);
} .parallax-right-0 {
transform: translate3d(calc(var(--viewport-y) * 2vh), 0, 0);
}
.parallax-right-1 {
transform: translate3d(calc(var(--viewport-y) * 5vh), 0, 0);
}
.parallax-right-2 {
transform: translate3d(calc(var(--viewport-y) * 20vh), 0, 0);
}
.parallax-right-3 {
transform: translate3d(calc(var(--viewport-y) * 40vh), 0, 0);
} .rotate-cw-1 {
transform: rotate(calc(var(--viewport-y) * 5deg));
}
.rotate-cw-2 {
transform: rotate(calc(var(--viewport-y) * 10deg));
}
.rotate-cw-3 {
transform: rotate(calc(var(--viewport-y) * 20deg));
} .rotate-ccw-1 {
transform: rotate(calc(var(--viewport-y) * -5deg));
}
.rotate-ccw-2 {
transform: rotate(calc(var(--viewport-y) * -10deg));
}
.rotate-ccw-3 {
transform: rotate(calc(var(--viewport-y) * -20deg));
} .rotate-x-1 {
transform: perspective(2500px) translateZ(20px) rotateX(calc(var(--viewport-y) * -10deg));
}
.rotate-x-2 {
transform: perspective(2500px) translateZ(20px) rotateX(calc(var(--viewport-y) * -20deg));
}
.rotate-x-3 {
transform: perspective(2500px) translateZ(20px) rotateX(calc(var(--viewport-y) * -40deg));
} .td-0 {
transition-delay: 0s !important;
}
.td-01 {
transition-delay: .1s !important;
}
.td-015 {
transition-delay: .15s !important;
}
.td-02 {
transition-delay: .2s !important;
}
.td-025 {
transition-delay: .25s !important;
}
.td-03 {
transition-delay: .3s !important;
}
.td-035 {
transition-delay: .35s !important;
}
.td-04 {
transition-delay: .4s !important;
}
.td-045 {
transition-delay: .45s !important;
}
.td-05 {
transition-delay: .5s !important;
}
.td-055 {
transition-delay: .55s !important;
}
.td-06 {
transition-delay: .6s !important;
}
.td-065 {
transition-delay: .65s !important;
}
.td-07 {
transition-delay: .7s !important;
}
.td-075 {
transition-delay: .75s !important;
}
.td-08 {
transition-delay: .8s !important;
}
.td-085 {
transition-delay: .85s !important;
}
.td-09 {
transition-delay: .9s !important;
}
.td-095 {
transition-delay: .95s !important;
}
.td-1 {
transition-delay: 1s !important;
}
.td-1-05 {
transition-delay: 1.05s !important;
}
.td-1-1 {
transition-delay: 1.1s !important;
}
.td-1-15 {
transition-delay: 1.15s !important;
}
.td-1-2 {
transition-delay: 1.2s !important;
}
.td-1-25 {
transition-delay: 1.25s !important;
}
.td-1-3 {
transition-delay: 1.3s !important;
}
.td-1-35 {
transition-delay: 1.35s !important;
}
.td-1-4 {
transition-delay: 1.4s !important;
}
.td-1-45 {
transition-delay: 1.45s !important;
}
.td-1-5 {
transition-delay: 1.5s !important;
}
.td-1-55 {
transition-delay: 1.55s !important;
}
.td-1-6 {
transition-delay: 1.6s !important;
}
.td-1-65 {
transition-delay: 1.65s !important;
}