サイトに立体感を持たせ、奥行きを演出。react-springでParallaxの実装

仕事で「パララックス」を実装できるか問われたのですが、そもそもパララックスの意味も分からず...。 その話はそこで終わったのですが、後日、reactで軽く調べて実装してみました。

パララックスとは

パララックスとは、要素ごとに動くスピードや動く方向を変化させて、遠近感を演出する効果を指します。 サイトをスクロールしたときに、立体感のあるサイトだなと思ったらパララックスを利用していることが多いです。 ちなみに日本語にすると「視差効果」という意味を持つようです。 要素ごとにスクロールの速さを変化させることで、奥行きを演出でき、動きのあるおしゃれなサイトを作ることができます。

react-spring

react-splingは、パララックスも実装できるReactのアニメーションライブラリです。 useSplingをはじめ、様々な動きを再現できるhooksがたくさんあります。

公式サイト:https://react-spring.io/

公式サイトのドキュメントページ内では、それぞれのhooksで実装したおしゃれなアニメーションのデモが見れます。 codesandboxのURLも載っており、コードをいじることもできます。個人的にですが、ドキュメントが読みにくいので、コードを触って確かめた方が理解できると思います。

パララックスの使用

本題のパララックスを使っていきます。ちなみにパララックスはhooksではなく、コンポーネントとして提供されています。

パララックスの実装には、<Parallax>と<ParallaxLayer>を作成します。 <Parallax>はスクロール可能なコンテナで、<ParallaxLayer>がその中のコンテンツを示します。

それぞれのオプション

<Parallax>

• pages

pagesは必須です。コンポーネントの高さです。 pages={1}で、100vhとなります。

<ParallaxLayer>

• factor

factorでpageに対しての要素の高さを指定できます。factor = {1}で100%です。

• offset

offsetでそのコンポーネントのトップがViewポートの一番上に来た時のパララックス全体で見た時の高さです。 言葉で説明するのが難しいのですが、例えばoffset={2}の時はそのコンポーネントのトップが一番上に来た時、パララックス全体で見た時に2ページ目の一番上に要素が表示されます。

• speed

要素がoffsetで指定した位置に来るまでの早さを指定します。 この値をコンポーネント毎に変えることで、動きのあるサイトを作ることができます。マイナスの値も指定できます。

• horizontal

スクロールが水平方向の動きになります。

ParallaxLayerで作成したコンポーネントは、コードの上部に記載したものから反映されますので、下に記述した要素の方が上に来ます。これは、z-indexを記述することで上書きされます。

コードの記述

parallaxをimportします。

import { Parallax, ParallaxLayer } from "@react-spring/parallax";

任意のページでコンポーネントを記述します。

import { Parallax, ParallaxLayer } from "@react-spring/parallax";

export const TestComponent = () => {
  return (
<Parallax pages={3} style={{ top: "0", left: "0" }}>
        <ParallaxLayer
          offset={0}
          speed={0.5}
          factor={1}
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            fontSize: "24px",
            backgroundColor: "pink",
          }}
        >
          Parallaxの実装
        </ParallaxLayer>
        <ParallaxLayer
          offset={1.3}
          speed={2}
          style={{
            backgroundColor: "yellow",
            width: "100%",
            height: "300px",
          }}
        />
        <ParallaxLayer
          offset={1.0}
          speed={1}
          style={{
            width: "60%",
            height: "500px",
            margin: "0 auto",
            backgroundColor: "lime",
          }}
        />
        <ParallaxLayer
          offset={1.6}
          speed={1.4}
          style={{
            backgroundColor: "skyblue",
            marginLeft: "auto",
            width: "50%",
            height: "400px",
          }}
        />
        <ParallaxLayer
          offset={1.0}
          speed={2.4}
          style={{
            width: "30%",
            height: "400px",
            backgroundColor: "red",
          }}
        />
        <ParallaxLayer
          offset={1.6}
          speed={0.8}
          style={{
            backgroundColor: "orange",
            width: "40%",
            height: "600px",
          }}
        />
      </Parallax>
  );
};

色々コードをいじって試してみてください。