スクロールすると画像やタイトルがフェードイン表示される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>

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

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

 

Category: Webサイト作成Tags: csshtmljavascript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

thirteen − nine =