Scroll-Story

Ebenen bewegen sich in unterschiedlichen Tiefen, während der Himmel beim Scrollen die Farbe wechselt.

scrollInputuseAnimatedCSSinterpolate

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { useRef } from 'react';
import { input, scrollInput, useAnimated, useAnimatedCSS } from '@kkwaenggwari/animated';
import './styles.css';

const chapters = ['Dawn', 'Climb', 'Summit'];

export default function App({ depth = 1 }) {
  const scroller = useRef(null);

  // 0 at the top of the scroller, 1 at the bottom.
  const progress = useAnimated(
    0,
    (value) => {
      input(scroller, scrollInput({ progressY: value }));
    },
    [],
  );

  const move = (distance) =>
    progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', `${distance * depth}px`] });

  // A color is not a calc() expression, so it gets its own CSS value.
  const sky = useAnimatedCSS(
    progress.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: ['#5c7cff', '#8fb0ff', '#0b1440'],
    }),
  );

  return (
    <div className="stage">
      <div ref={scroller} className="scroller">
        <div className="scene" style={{ background: sky }}>
          <span className="sun" style={{ transform: `translateY(${move(-150)})` }} />
          <span className="hill far" style={{ transform: `translateY(${move(-50)})` }} />
          <span className="hill near" style={{ transform: `translateY(${move(-110)})` }} />
          {chapters.map((chapter, index) => {
            const at = index / (chapters.length - 1);
            const opacity = progress.interpolate({
              inputRange: [at - 0.3, at, at + 0.3],
              outputRange: [0, 1, 0],
              extrapolate: 'clamp',
            });
            return (
              <h3 key={chapter} style={{ opacity }}>
                {chapter}
              </h3>
            );
          })}
        </div>
        <div className="spacer" />
      </div>
      <p>Scroll inside the frame.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.scroller {
  height: 340px;
  border-radius: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.scene {
  position: sticky;
  top: 0;
  height: 340px;
  overflow: hidden;
}

.sun {
  position: absolute;
  left: 58%;
  top: 150px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #ffffff;
}

.hill {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0;
}

.far {
  bottom: -180px;
  height: 320px;
  background: #4a6bff;
}

.near {
  bottom: -240px;
  left: -40%;
  height: 360px;
  background: #16181d;
}

.scene h3 {
  position: absolute;
  inset: 32px 28px auto;
  margin: 0;
  color: #fff;
  font-size: 34px;
}

.spacer {
  height: 1100px;
}

.stage p {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

So funktioniert es

scrollInput({ progressY }) schreibt den Fortschritt des Scroll-Containers, von 0 bis 1, in einen Wert.
Jede Ebene interpoliert diesen Wert auf ihre eigene Distanz, die Parallaxe ist also reines calc().
Die Himmelsfarbe ist kein calc()-Ausdruck, daher gibt useAnimatedCSS ihr eine eigene Variable.
Kapiteltitel blenden über ihren eigenen Abschnitt des Fortschritts ein und aus.

Scroll-Story

So funktioniert es

Weitere Beispiele

Suchen