👻

【React】横スクロールのサイトで追従ヘッダーを実装する

2023/06/22に公開

CSS

はじめに

今回、横スクロール × トップビジュアルに被らないようにする追従ヘッダーを実装したので、
コードを残しておきます。

以下の参考サイトでは、スクロールの途中からヘッダーが左から
ひょこっと現れるような実装になっています。

参考サイト
https://harkenic.com/

という部分がポイントです。

トップビジュアルははっきり見せたいという要望が多いはずですし、
ヘッダーを見せることでサイトの回遊率も上がります。

この実装は地味に役立つのではないかと思います。

使用した知識とライブラリ

三項演算子
react-intersection-observer
cssアニメーション

これだけで簡単に実装できちゃいます。
早速見ていきましょう！

コード例


import { useInView } from "react-intersection-observer";

const App = () => {
  const {ref, inView} = useInView({
    threshold: 0, //refを設定しているエリアが0%見えたら検知(0~1まで設定可)
    triggerOnce: false, //trueにすると、検知は1度きり
  });
  
  return(
  <div className="App">
    <div ref={ref}>
      <トップビジュアルのコンポーネント />
    </div>
    <div className="flex">
    {/* ↓追従させたいヘッダー */}
      <header className={inView ? "invisible" : "visible"}>
        <div>...</div>
      </header>
    {/* ↑追従させたいヘッダー */}
      <コンポーネント />
      <コンポーネント />
      <コンポーネント />
    </div>
  );
}


.flex {
  display: flex;
}

.invisible {
  animation: disappear .5s ease-in-out forwards;
}

.visible {
  animation: appear .5s ease-in-out forwards;
}

@keyframes disappear {
  0% {
    transform: translate(0px);
  }
  100% {
    transform: translate(-60px);
    opacity: 0;
  }
}

@keyframes appear {
  0% {
    transform: translate(-60px);
    opacity: 0;
  }

  100% {
    transform: translate(0px);
  }
}

解説

react-intersection-observerをインストール

ドキュメントはこちらです。

yarn

yarn add react-intersection-observer

npm

npm install react-intersection-observer --save

refとinViewを定義

useInViewをインポート

import { useInView } from 'react-intersection-observer';

  const {ref, inView} = useInView({
    threshold: 0,
    triggerOnce: false,
  });

ドキュメントからそのままコピペ。

他にもオプションがあるので気になったら
ぜひ追記してみてください。

今回は不要なので上記の二つだけです。

refをトップビジュアルのすぐ上の親要素に

<div ref={ref}> {/* ←ここにrefを入れる */}
  <トップビジュアルのコンポーネント />
</div>

<div className="flex">
  <header className={inView ? "invisible" : "visible"}>
    <div>...</div>
  </header>
  <コンポーネント />
  <コンポーネント />
  <コンポーネント />
</div>

inViewで三項演算子

ここでのポイントは、refの参照エリア(今回はトップビジュアル)に
ユーザのビューポイントが入っているかどうかをinViewで判断している、
という点です。

つまり、

ユーザがトップビジュアルを画面で表示している
→ inView = true
ユーザがトップビジュアルを画面で表示していない
→ inView = false

今回、追従ヘッダーはユーザがトップビジュアルを
画面で表示していないときに見えるようにしてほしいので、

上記のコードでは、
inView = false の時に visible というクラスが
付与されるように実装しています。

cssアニメーション

ここでのヘッダーの表示のされ方は、
あくまで僕が制作しているサイトの雰囲気に合った
実装になるので、

こちらはあなたが自由にお好みで実装してください。

最後まで見ていただきありがとうございました！