React Scroll Parallaxを使ってみた！

これはフェンリル デザインとテクノロジー Advent Calendar 2024 21日目の記事です。

はじめに

パララックスなデザインのサイトを作ってみたいと思い、何かライブラリで簡単にできないかと探していたらReact Scroll Parallaxというライブラリを見つけたので、このライブラリの説明と実装例を紹介したいと思います。

パララックスとは

Webデザインにおけるパララックスとは、WEBサイトに動きや奥行きを加える視覚的な効果の１つです。
具体的にはスクロール操作に応じて、それぞれの要素が異なる速度で移動することによって立体感やダイナミックな印象を与える技術です。

React Scroll Parallaxの概要

公式サイトより引用

React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes Parallax Controller to add vertical or horizontal scrolling based effects to elements. Optimized to reduce jank on scroll and works with SSR and SSG rendered React apps.

パララックススクロールエフェクトを作成するためのReactフックとコンポーネントを提供してくれるライブラリです。
Parallax Controllerを利用して要素に垂直または、水平スクロールベースのエフェクトを追加します。スクロール時のノイズを減らすように最適化されており、SSRおよびSSGレンダリングのReactアプリで動作します。

使ってみる

使用ライブラリとバージョン

react v18.3.1
react scroll parallax v3.4.5

インストール

npm install react-scroll-parallax

ParallaxProviderで囲む

まずは、パララックスにしたいコンポーネントを <ParallaxProvider>で囲みます。

import { ParallaxProvider } from "react-scroll-parallax";
import { Top } from "./Page/Top";
function App() {
  return (
    <ParallaxProvider>
        <Top />
    </ParallaxProvider>
  );
}
export default App;
);

横からコンテンツの出現

スクロールしていくとサイドからコンテンツが表示されます。

import { Parallax } from "react-scroll-parallax";
import styles from "./style.module.scss";
export const AppearText = () => {
  return (
    <div>
      <Parallax
        translateX={[0, 100, "easeOutQuint"]}
        className={styles.message1}
      >
        1
      </Parallax>
      <Parallax
        translateX={[100, 0, "easeOutQuint"]}
        className={styles.message2}
      >
        2
      </Parallax>
      <Parallax
        translateX={[0, 100, "easeOutQuint"]}
        className={styles.message3}
      >
        3
      </Parallax>
    </div>
  );
};

ページスクロール時の背景色の変更

特定の要素が画面内に入ると背景色が変更されます。

import styles from "./style.module.scss";
import { useState } from "react";
import { Parallax } from "react-scroll-parallax";

export const Progress = () => {
  const [progress, setProgress] = useState<number>();
  const [enter, setEnter] = useState<boolean>();

  return (
    <div
      className={`${styles.container} ${enter ? styles.light : styles.dark}`}
    >
      <Parallax
        onProgressChange={(p) => setProgress(p)}
        onEnter={() => setEnter(true)}
        onExit={() => setEnter(false)}
        className={styles.progress}
      />
      <p className={styles.moji}>moji</p>
    </div>
  );
};

スクロール時のスピードを設定

スクロールした時にボックスのスクロールスピードを調整することができます。
上から下にスクロールした時、文字が左から右に流れます。

import { Parallax } from "react-scroll-parallax";
import styles from "./style.module.scss";

export const Slide = () => {
  return (
      <div className={styles.container}>
        <div className={styles.slideContainer}>
          <Parallax speed={20} className={styles.left}></Parallax>
          <Parallax speed={-5} className={styles.centerRight}>
            <div className={styles.center} />
            <div className={styles.right} />
          </Parallax>
        </div>

        <Parallax
          translateX={["-500px", "0px"]}
          easing="easeInQuad"
          className={styles.text}
        >
          Neque porro quisquam est qui dolorem ipsum
        </Parallax>
      </div>
  );
};

まとめ

この記事では、React Scroll Parallaxの基本的な使用方法と実際にこのライブラリを使用した実装例を紹介しました。
触ってみて感じた良い点は、導入が容易であることと、シンプルな構造で直感的に理解しやすいことです。
ただ、複雑なアニメーションを実装したい場合は、他のライブラリを使用するのがいいと思います。
今回はプロトタイプの紹介でしたが、このライブラリを使用してサイトを作ってみたいです。

ここまで読んでいただきありがとうございました。

今回のリポジトリ

参考