スクロールすると画像やタイトルがフェードイン表示されるCSS、javascriptのサンプルコード

2021年3月15日2022年3月30日

この記事では、WEBページを閲覧する際にスクロール量に合わせてタイトルや画像などの要素をフェードインで表示させるサンプルコードを紹介します。

▶フェードイン表示のサンプルサイトを見る

コードサンプル

ここではhtml、css、javascriptのサンプルコードを紹介します。

HTML

ポイントはclassに「fade」が指定されていること。

cssで予め透明化などのスタイルを定義しておきます。

<div>
  <h2 class="fade">タイトル</h2>
  <div class="fade"><img src="img/400-300.jpg" alt="画像" /></div>
  <p class="fade">テキスト</p>
</div>

CSS

ここでは２つのクラス名が定義されていますが、フェードイン前と後で最低限必要になるスタイルです。

.fade {
  transition: all 2000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}

.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
}

javascript

仕様は次のとおりです。

スクロール時に実行される処理Aを作る
Aの処理内で、class「fade」が付与されている「要素nすべて」に対しての処理を作る
ブラウザのサイズ（高さ）を取得する
要素nの位置（Y軸）を取得する
要素nの位置が（スクロール量＋ブラウザの高さ）より小さければ、class「fadein」を要素nに追加で付与する

 <script>
(window.onload = function() {

  // フェードイン処理
  jQuery(window).scroll(function (){
    jQuery(".fade").each(function(){
      var winheight = jQuery(window).height();
      var posi = jQuery(this).offset().top;
      var scroll = jQuery(window).scrollTop();
      if (scroll + winheight > posi){
        jQuery(this).addClass("fadein");
      } else {
        //　スクロールで画面上部に戻った際に要素を非表示にしたい場合は、下記の行のコメントを外し有効にしてください。
        //jQuery(this).removeClass("fadein");
      }
    });
   });

})(); 
</script>

以上がスクロール量に応じた要素のフェードイン表示処理のサンプルコードになります。

ざっくりしてますが、参考になれば幸いです。