Cerita gulir

Lapisan bergerak pada kedalaman berbeda sementara langit berganti warna saat Anda menggulir.

scrollInputuseAnimatedCSSinterpolate

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Cara kerjanya

scrollInput({ progressY }) menulis progres scroller dari 0 sampai 1 ke satu nilai.
Setiap lapisan menginterpolasi nilai itu ke jaraknya sendiri, jadi paralaksnya murni calc().
Warna langit bukan ekspresi calc(), jadi useAnimatedCSS memberinya variabel sendiri.
Judul bab muncul dan memudar pada bagian progresnya masing-masing.

Cerita gulir

Cara kerjanya

Contoh lainnya

Cari