<div data-scroll-container>
<div class="section" data-scroll-section>
<div>
<h1 data-scroll>Hey</h1>
<p data-scroll data-scroll-direction="horizontal" data-scroll-speed="12" style="margin-left: 20vw;">👋</p>
</div>
</div>
<div class="section" data-scroll-section>
<div>
<h2 data-scroll data-scroll-speed="1">Looks like rain</h2>
<p data-scroll data-scroll-speed="4">🌧</p>
</div>
</div>
<div class="section" data-scroll-section>
<div>
<h2 data-scroll data-scroll-speed="1">Have an apple</h2>
<p data-scroll data-scroll-direction="horizontal" data-scroll-speed="-6">🍎</p>
</div>
</div>
</div>
body {
margin: 0;
text-align: center;
font: 900 120% system-ui, sans-serif;
}
.section {
height: 100vh;
display: grid;
place-items: center;
}
p {
font-size: 120px;
margin: 0;
}
h1 {
margin: 0;
}
View Compiled
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll";
const scroller = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true
});
This Pen doesn't use any external JavaScript resources.