<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
});
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css

External JavaScript

This Pen doesn't use any external JavaScript resources.