<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="src/styles.css" />
</head>
<body data-scroll-container>
<div class="app" data-scroll-section>
<h1 class="h1" data-scroll data-scroll-sticky data-scroll-target=".app">
<span class="line">
<span class="line-inner">Worldwide</span>
</span>
<span class="line">
<span class="line-inner">pizza</span>
</span>
</h1>
<div class="main">
<img
src="https://images.unsplash.com/photo-1571407921708-4202261ea9e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="pizza"
data-scroll
data-scroll-speed="1"
/>
<img
class="img-abs"
src="https://images.unsplash.com/photo-1534963063257-6b65b54e438b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="pizza"
data-scroll
data-scroll-speed="-1"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero
iure placeat atque minus voluptatem molestias ducimus aut repellat
repellendus est, assumenda accusamus. Fugit iure rerum dicta
veritatis, quia aliquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero
iure placeat atque minus voluptatem molestias ducimus aut repellat
repellendus est, assumenda accusamus. Fugit iure rerum dicta
veritatis, quia aliquam!
</p>
</div>
<div
class="background"
data-scroll
data-scroll-sticky
data-scroll-target=".app"
></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import LocomotiveScroll from "locomotive-scroll";
gsap.registerPlugin(ScrollTrigger);
gsap.to(".line-inner", {
y: "0%",
rotate: "0deg",
duration: 0.7,
delay: 0.5,
stagger: {
from: "end",
amount: 0.1
}
});
const locoScroll = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true
});
locoScroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy("body", {
scrollTop(value) {
return arguments.length
? locoScroll.scrollTo(value, 0, 0)
: locoScroll.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
}
});
gsap.to(".background", {
backgroundColor: "rgb(20, 20, 20)",
duration: 1,
ease: "Power4.easeIn",
scrollTrigger: {
trigger: ".img-abs",
start: "50% 50%",
scrub: true
}
});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
box-sizing: border-box;
cursor: default;
font-size: 62.5%;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: "MuseoModerno", cursive;
font-weight: 600;
font-size: 6vw;
line-height: 1.1;
min-height: 100vh;
height: -webkit-fill-available;
max-width: 100vw;
overscroll-behavior: none;
-webkit-overflow-scrolling: none;
overflow-x: hidden;
color: rgb(20, 20, 20);
}
.app {
width: 100%;
height: 100%;
position: relative;
padding: 1rem;
}
.h1 {
font-family: "MuseoModerno", cursive;
font-weight: 600;
font-size: 17vw;
line-height: 1;
}
.line {
display: block;
overflow: hidden;
}
.line-inner {
display: block;
transform: translateY(110%) rotate(5deg);
}
.main {
width: 100%;
margin-top: 5vw;
position: relative;
}
.main img {
width: 70%;
}
.main .img-abs {
position: absolute;
top: 15vw;
right: 0;
width: 40vw;
border: 1vw rgb(230, 230, 230) solid;
z-index: 2;
}
p {
width: 60%;
font-size: 4vw;
margin-top: 4vw;
margin-bottom: 4vw;
color: rgb(230, 230, 230);
}
.background {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgb(230, 230, 230);
z-index: -1;
}
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;
}
.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.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
