【JS/jQuery】inview.jsを使ってフェードインを使いこなそう！

世にはいろんな方法でフェードインを入れる方法があるかと思いますが、今回はぼくがずっとWEB制作でお世話になっている「inview.js」を紹介します。

「inview.js」をダウンロードする
実際に導入する
実際のコード解説
もっとカスタマイズするなら
まとめ

「inview.js」をダウンロードする

「Code」→「Download Zip」→「jquery.inview.min.js」をサイト内フォルダに設置してください。

※minじゃないほうでも大丈夫です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="js/jquery.inview.min.js"></script>

↑　階層、フォルダ名など適宜変更おねがいします。

実際に導入する

See the Pen Untitled by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

表示イメージ的にはこんな感じです。

実際のコード解説

<p class="inview1" style="font-size:24px;">フェードインするよ</p>

ここで大事なのは「class=”inview1″」部分のみです。わかりやすいクラス名であればなんでも大丈夫です。またpタグに限らず、divタグ、aタグなどなんでも使えます。

.inview1{
  opacity: 0;
  transform: translateY(20px);
  transition: 0.8s;
  transition-delay: 0.1s;
}

.inview1.show{
  opacity: 1;
  transform: translateY(0px); 
}

.inview1 をもっているタグに　.showが追加されると表示される仕組みです。

transform: translateY(20px);　部分で移動してくる位置や角度を調整、transitionで何秒かけて表示するかなどを調整します。普段コード書いている方なら自由に調整されて大丈夫かと思います。

jQuery(function() {
  jQuery(".inview1").on("inview", function (event, isInView) {
    if (isInView) {
      jQuery(this).stop().addClass("show");
    }
  });
});

JS部分に関してはこんな感じです。.inview1を持っているタグが表示領域に入ったとき、showクラスと追加　→　CSSでふわっと表示させる。　こんなイメージです。