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

スクロールするとフェードイン表示させるCSS、javascriptのサンプル

この記事では、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

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

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

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

javascript

仕様は次のとおりです。

  1. スクロール時に実行される処理Aを作る
  2. Aの処理内で、class「fade」が付与されている「要素nすべて」に対しての処理を作る
  3. ブラウザのサイズ(高さ)を取得する
  4. 要素nの位置(Y軸)を取得する
  5. 要素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>

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

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

▼【PR】副業でWEBコーディングのお仕事をしてみたい人はココナラがおすすめ!▼ 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

関連広告

コメント

コメントする

16 + eleven =

目次
閉じる