【React】スクロールでふわっと表示

トップ MEMORANDAM React

【React】スクロールでふわっと表示

公開日:2022.10.05　更新日:2022.10.09

React JS

みんな大好きスクロールアクションの1つのやり方です。
jQueryで書いたり、プラグイン入れたりする人多いと思います。
が個人的なやり方の1提案です。

スクロールアクションのやり方

やり方1 プラグインを使う

有名なのは inview.jsですね。
はGITなのでダウンロードして使ってみましょう inview.js

ブラウザ表示領域に入ったらinviewがクラスつけてくれるので、クラスがついたらcssアニメーションかけてフワッとさせるやつです。

やり方は簡単、CDN読む→JS書く→CSSでアニメ作るですね。

HTML

     

headかbody下でjs読む
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.inview.min.js"></script>

<div class="scroll">スクロールする部分</div>

CSS

    
// actが付いたらオパシティ1して表示

.scroll{
    opcity:0;
    transition: all .3s ease;
  }

  .act{
    opacity:1;
  }

JS

     

//scrollが表示領域に入ったらactを追加する

$(function() {
$('.scroll').on('inview', function(event, isInView) {
if (isInView) {
// .actがビューポートに入った場合
$(this).addClass('act');
} else {
// .actが表示領域から抜けた場合
$(this).removeClass('act');
}
});
});

やり方2 JQueryのみ

JQueryのみ読み込んで、スクロール量で判別。
スクロールした量が、元々いた位置より大きくなればactをつけるみたいな感じのこと書いてます。

    function scrollAnimation() {
    $(window).scroll(function () {
        $(".scroll").each(function () {
            let t = $(this).offset().top;
            $(window).scrollTop() > t - $(window).height() + 200 && $(this).addClass("act")
        })
    })
}

やり方3 JSのみ

色々書いてますが、下の方のtargetsでクラスをして上のほうのclassList.addで何のクラスをつけるか指定するだけ。
動きはcssで書きます。

ライブラリ読み込みが必要ないので軽くなるし、ライトハウスにレンダリングの話もされません。

    const setObserver = () => {
    const callback = (entries) => {//各 entry（IntersectionObserverEntry オブジェクト）に対して
        entries.forEach((entry) => {//監視対象の要素が領域内に入った場合の処理
            if (entry.isIntersecting) {
                entry.target.classList.add('act');
            }
        });
    }
   
    const options = {
        threshold: [.2, 1]
    }
    const observer = new IntersectionObserver(callback, options); //引数にコールバック関数とオプションを指定してオブザーバーを生成
    const targets = document.querySelectorAll('.scroll'); //監視対象の要素（target クラスを指定した要素）を全て取得
    targets.forEach((elem) => {
        observer.observe(elem); //observe() に監視対象の要素を指定
    });
}

スクロールアクションのやり方

やり方1 プラグインを使う

HTML

CSS

JS

やり方2 JQueryのみ

やり方3 JSのみ

おすすめはJSのみ