Zgodba z drsenjem

Plasti se premikajo na različnih globinah, nebo pa med drsenjem spreminja barvo.

scrollInputuseAnimatedCSSinterpolate

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Kako deluje

scrollInput({ progressY }) zapiše napredek drsnika od 0 do 1 v eno vrednost.
Vsaka plast to vrednost interpolira na svojo razdaljo, zato je paralaksa čisti calc().
Barva neba ni izraz calc(), zato ji useAnimatedCSS da lastno spremenljivko.
Naslovi poglavij se prikažejo in zbledijo v svojem delu napredka.

Zgodba z drsenjem

Kako deluje

Več primerov

Iskanje