Historia con scroll

Las capas se mueven a distintas profundidades mientras el cielo cambia de color al hacer scroll.

scrollInputuseAnimatedCSSinterpolate

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

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;
}

Cómo funciona

scrollInput({ progressY }) escribe en un valor el progreso del contenedor con scroll, de 0 a 1.
Cada capa interpola ese valor a su propia distancia, así que el paralaje es calc() puro.
El color del cielo no es una expresión calc(), así que useAnimatedCSS le da su propia variable.
Los títulos de capítulo aparecen y desaparecen en su propio tramo del progreso.

Historia con scroll

Cómo funciona

Más ejemplos

Buscar