【動きのあるページを簡単に実装！】スクロールに応じてコンテンツをフェードインさせるjsとcss

Web2017年8月28日

Webページに動きを持たせる際、必ずcssとjsの工夫は欠かせませんが、フェードインくらいであれば実はけっこう割と簡単に実装できます。本記事ではjsとcssを使ってスクロールに応じてコンテンツをフェードインさせる方法をご紹介いたします。

サンプルコード

js

$(function(){
	'use scrict';

	var scrollAnimation = function(){
		
		$(window).scroll(function(){
			var scrTop = $(document).scrollTop(),
				scr1 = $('.scroll-01').get(0).offsetTop,
				scr2 = $('.scroll-02').get(0).offsetTop,
				scr3 = $('.scroll-03').get(0).offsetTop;
			
			if(scrTop >= scr1){$('.scroll-01').addClass('fadeIn');}
			if(scrTop >= scr2){$('.scroll-02').addClass('fadeIn');}
			if(scrTop >= scr3){$('.scroll-03').addClass('fadeIn');}

		});
	};
	
	scrollAnimation();
});

※jQueryを読み込んでいる場合のスクリプトとなります

html

<div id="container">
<p class="main-visual"><img src="https://placehold.jp/1020x1000.png" alt=""></p>
<div class="scroll-01">
<p class="title">1つめのフェードイン</p>
<p><img src="https://placehold.jp/1020x600.png" alt=""></p>
</div>
<div class="scroll-02">
<p class="title">2つめのフェードイン</p>
<p><img src="https://placehold.jp/1020x600.png" alt=""></p>
</div>
<div class="scroll-03">
<p class="title">3つめのフェードイン</p>
<p><img src="https://placehold.jp/1020x600.png" alt=""></p>
</div>
</div><!--#container-->

css

.scroll-01,
.scroll-02,
.scroll-03 {
	opacity: 0.1;
}

.fadeIn {
	opacity: 1;
	animation-duration: .4s;
	animation-name: fadeInScr;
}

@keyframes fadeInScr {

0% {opacity: 0.1;}
100% {opacity: 1;}

}

解説

今回実現する動きは、.scroll-01、.scroll-02、.scroll-03をそれぞれスクロールに応じてフェードインさせたいと思います。

まず、あらかじめcssで.scroll-01、.scroll-02、.scroll-03のopacityを0.1にします。また、.fadeInでkeyframesを使用したアニメーションを準備しておきます。0.4秒かけてopacityを0.1から1.0に変更するようにします。この.fadeInをあるところまでスクロールしたらjsで付与することで、フェードインアニメーションを実現します。

jsでは、変数scrTopにWebページのスクロールの値を格納します。変数scr1～scr3にはページ最上部から.scroll-01～.scroll-03の距離を格納します。

最後のif文でそれぞれの値を比較します。
.scroll-01を例に説明すると、「スクロールした値が最上部からの対象セレクタへの距離を超えたら」.fadeInを付与させる、という処理をしています。これでアニメーションしてコンテンツが表示されます。

また、以下のようにscr1～scr3の値を調整することで、フェードインさせる位置を微調整することも可能です。

var scr1 = $('.scroll-01').get(0).offsetTop - 300;

※セレクタの最上部に到達しなくても、その手前300px以内に入ってくればフェードインするようになります

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

スクロールに応じてコンテンツをフェードインさせるjsとcss

まとめ

以前の記事でご紹介した、スクロール時のバーチャルページビューを計測する方法と似てますね。そんなに長いスクリプトを書かずとも応用が利くので、このテクニックはぜひ覚えておくとよいです。

まったく動きのないページでも、こうやってちょっとしたフェードイン効果などを加えることでリッチコンテンツ感が出ますので、ぜひご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。