【動きのあるページを簡単に実装！】スクロールに応じてコンテンツをフェードインさせる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以内に入ってくればフェードインするようになります
デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
以前の記事でご紹介した、スクロール時のバーチャルページビューを計測する方法と似てますね。そんなに長いスクリプトを書かずとも応用が利くので、このテクニックはぜひ覚えておくとよいです。
まったく動きのないページでも、こうやってちょっとしたフェードイン効果などを加えることでリッチコンテンツ感が出ますので、ぜひご参考にしていただければ幸いです。