Reactでパララックスのデザインで実装する方法

Reactでパララックスのデザインで実装する方法

Reactでパララックスデザインを実装するには、react-parallaxというライブラリを使用すると便利です。
以下に、TypeScriptでの実装例を示します。
この例では、react-parallaxライブラリを使用してパララックス効果を実現します。

ライブラリのインストール

npmを使用する場合:

npm install react-parallax

yarnを使用する場合:

yarn add react-parallax

ソースコード例

// components/ParallaxComponent.tsx
import React from 'react';
import { Parallax, Background } from 'react-parallax';
import styles from './ParallaxComponent.module.scss';

const ParallaxComponent: React.FC = () => {
  return (
    <div className={styles.container}>
      <Parallax strength={300}>
        <Background className="custom-bg">
          <img src="/path/to/your/image.jpg" alt="background" />
        </Background>
        <div className={styles.content}>
          <h1>パララックス効果のコンテンツ</h1>
          <p>スクロールしてみてください。</p>
        </div>
      </Parallax>
    </div>
  );
};

export default ParallaxComponent;

// components/ParallaxComponent.module.scss
.container {
  height: 100vh;
  overflow: hidden;
}

.content {
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 1px 1px 2px black;
}

.custom-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

使用方法

このコンポーネントをページに追加するには、次のようにします。

// pages/index.tsx
import React from 'react';
import ParallaxComponent from '../components/ParallaxComponent';

const HomePage: React.FC = () => {
  return (
    <div>
      <ParallaxComponent />
    </div>
  );
};

export default HomePage;

このコード例では、react-parallaxライブラリを使用して背景画像にパララックス効果を与え、スクロール時に画像が異なる速度で動くようにしています。
ParallaxComponentをページに追加することで、簡単にパララックス効果を持つセクションを作成できます。