scrollex

scrollexは手軽にモダンなスクロールエクスペリエンスを構築できる軽量Reactライブラリです。スクロールに応じてコンテンツをスマートに表示したり画像等を切り替えたりといった演出を手軽に実装する事が出来ます。

尚、予想された方もいらっしゃると思いますが実装にはframer-motionが使われています。

npm install --save scrollex framer-motion

基本的にはScroll.Containerを追加してセクションで分割し、コンテンツを管理します。

<Scroll.Container scrollAxis="y" className="h-screen">
  <Scroll.Section className="h-full center bg-1">
    <h1>Page One</h1>
  </Scroll.Section>
  <Scroll.Section className="h-full center bg-2">
    <h1>Page Two</h1>
  </Scroll.Section>
  <Scroll.Section className="h-full center bg-1">
    <h1>Page Three</h1>
  </Scroll.Section>
</Scroll.Container>

この基本形によって、例えばセクション上端がコンテナ上端とクロスした際にtrueとなる条件を定義可能となります。

後はエフェクト等を定義して適応させます。

const keyframes = {
  heading: {
    0: {
      translateX: -200,
    },
    200: {
      translateX: 200,
    },
  },
};

export default function App() {
  return (
    <Scroll.Container scrollAxis="y" className="h-screen">
      <Scroll.Section className="h-full center bg-1">
        <Scroll.Item keyframes={keyframes.heading}>
          <h1>Page One</h1>
        </Scroll.Item>
      </Scroll.Section>
      <Scroll.Section className="h-full center bg-2">
        <Scroll.Item keyframes={keyframes.heading}>
          <h1>Page Two</h1>
        </Scroll.Item>
      </Scroll.Section>
      <Scroll.Section className="h-full center bg-1">
        <Scroll.Item keyframes={keyframes.heading}>
          <h1>Page Three</h1>
        </Scroll.Item>
      </Scroll.Section>
    </Scroll.Container>
  );
}

Scroll.Itemにkeyframes={keyframes.heading}を追加する事で横移動するエフェクトが出来ました。

使い方も簡単ですし、CSSのkeyframesが把握出来ていれば問題ないかと思います。詳細はドキュメントをご確認下さい。ライセンスはMITとの事です。

scrollex