フロントエンドの仕事でWebサイトの構築をしていると、頻繁にスクロールして要素の高さまで到達したら表示するという処理をすることがあります。
表示の仕方はフェードインだったり上下動いて表示させたりと様々ですが、今回はよく使う７パターンを紹介します。
早速ですが、まずは下記のDemoを御覧ください。
前提
共通CSS
.list{ margin: 50px 50px 50px 50px; list-style-type: none; overflow: hidden; } .list li{ margin: 50px 20px 50px 20px; float: left; transition: .8s; }
表示される画像の要素は共通のCSSを使用しています。
表示する動きの部分のみを別クラスで定義する形になります。
※別クラス=opacityなどの透明度でフェードインさせたり、回転させるといった機能を別クラスにしています。
スクロールイベント用jQueryプラグイン
スクロールイベントは「jquery.inview.js」というプラグインを使用します。ブラウザの画面上で要素が見えたとき・画面から外れたときに処理を実行するという動作が簡単に実現できます。
まずはGithubに用意されている公式の配布サイトからプラグインのファイルをダウンロードしてきましょう。
jQueryを読み込むために下記2行を追加します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./jquery.inview.js"></script>
inviewの使い方で参考にしたブログ
- 【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。 | 横浜でWeb制作を行うシーブレインスタッフによる技術情報ブログ
- 【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［jquery.inview］プラグイン。 - ONZE
ズームイン表示
要素が表示されるエリアまでスクロールしたら、ズームインしながら要素を表示します。<h2 class="mod-tit-demo02">１．縮小・拡大表示</h2> <ul class="list"> <li class="list-mv01"><img src="common/img/01.jpg"></li> <li class="list-mv01"><img src="common/img/02.jpg"></li> <li class="list-mv01"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv01"><img src="common/img/01.jpg"></li> <li class="list-mv01"><img src="common/img/02.jpg"></li> <li class="list-mv01"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv01"><img src="common/img/01.jpg"></li> <li class="list-mv01"><img src="common/img/02.jpg"></li> <li class="list-mv01"><img src="common/img/03.jpg"></li> </ul>
.list{ margin: 50px 50px 50px 50px; list-style-type: none; overflow: hidden; } .list li{ margin: 50px 20px 50px 20px; float: left; transition: .8s; } .list-mv01{ transform: scale(0, 0); -webkit-transform: scale(0, 0); } .mv01{ transform: scale(1, 1); -webkit-transform: scale(1, 1); }
$(function() { $('.list-mv01').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv01'); } else{ $(this).stop().removeClass('mv01'); } }); });
フェードイン表示
要素が表示されるエリアまでスクロールしたら、フェードインしながら要素を表示します。<ul class="list"> <li class="list-mv02"><img src="common/img/01.jpg"></li> <li class="list-mv02"><img src="common/img/02.jpg"></li> <li class="list-mv02"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv02"><img src="common/img/01.jpg"></li> <li class="list-mv02"><img src="common/img/02.jpg"></li> <li class="list-mv02"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv02"><img src="common/img/01.jpg"></li> <li class="list-mv02"><img src="common/img/02.jpg"></li> <li class="list-mv02"><img src="common/img/03.jpg"></li> </ul>
.list-mv02{ opacity: 0; } .mv02{ opacity: 1.0; }
$(function() { $('.list-mv02').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv02'); } else{ $(this).stop().removeClass('mv02'); } }); });
回転
要素が表示されるエリアまでスクロールしたら、回転しながら要素を表示します。<ul class="list"> <li class="list-mv03"><img src="common/img/01.jpg"></li> <li class="list-mv03"><img src="common/img/02.jpg"></li> <li class="list-mv03"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv03"><img src="common/img/01.jpg"></li> <li class="list-mv03"><img src="common/img/02.jpg"></li> <li class="list-mv03"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv03"><img src="common/img/01.jpg"></li> <li class="list-mv03"><img src="common/img/02.jpg"></li> <li class="list-mv03"><img src="common/img/03.jpg"></li> </ul>
.list-mv03{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } .mv03{ transform: rotate(360deg); -webkit-transform: rotate(360deg); }
$(function() { $('.list-mv03').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv03'); } else{ $(this).stop().removeClass('mv03'); } }); });
3D回転
要素が表示されるエリアまでスクロールしたら、3D回転しながら要素を表示します。おしゃれなサイトはよくこのあたりの動きを仕様したりしています。
<ul class="list"> <li class="list-mv04"><img src="common/img/01.jpg"></li> <li class="list-mv04"><img src="common/img/02.jpg"></li> <li class="list-mv04"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv04"><img src="common/img/01.jpg"></li> <li class="list-mv04"><img src="common/img/02.jpg"></li> <li class="list-mv04"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv04"><img src="common/img/01.jpg"></li> <li class="list-mv04"><img src="common/img/02.jpg"></li> <li class="list-mv04"><img src="common/img/03.jpg"></li> </ul>
.list-mv04{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg); } .mv04{ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }
$(function() { $('.list-mv04').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv04'); } else{ $(this).stop().removeClass('mv04'); } }); });
上移動
要素が表示されるエリアまでスクロールしたら、上移動しながら要素を表示します。動きをあまり入れたくない企業のWebサイトやブログなどにオススメです。
<ul class="list"> <li class="list-mv05"><img src="common/img/01.jpg"></li> <li class="list-mv05"><img src="common/img/02.jpg"></li> <li class="list-mv05"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv05"><img src="common/img/01.jpg"></li> <li class="list-mv05"><img src="common/img/02.jpg"></li> <li class="list-mv05"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv05"><img src="common/img/01.jpg"></li> <li class="list-mv05"><img src="common/img/02.jpg"></li> <li class="list-mv05"><img src="common/img/03.jpg"></li> </ul>
.list-mv05{ transform: translate(0,40px); -webkit-transform: translate(0,40px); } .mv05{ transform: translate(0,0); -webkit-transform: translate(0,0); }
$(function() { $('.list-mv05').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv05'); } else{ $(this).stop().removeClass('mv05'); } }); });
3D回転＋ズームイン表示
要素が表示されるエリアまでスクロールしたら、3D回転＋ズームイン表示しながら要素を表示します。上で紹介した2つのCSSを組み合わせて使用しています。
<ul class="list"> <li class="list-mv06"><img src="common/img/01.jpg"></li> <li class="list-mv06"><img src="common/img/02.jpg"></li> <li class="list-mv06"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv06"><img src="common/img/01.jpg"></li> <li class="list-mv06"><img src="common/img/02.jpg"></li> <li class="list-mv06"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv06"><img src="common/img/01.jpg"></li> <li class="list-mv06"><img src="common/img/02.jpg"></li> <li class="list-mv06"><img src="common/img/03.jpg"></li> </ul>
.list-mv06{ transform: scale(0, 0) rotateY(180deg); -webkit-transform: scale(0, 0) rotateY(180deg); } .mv06{ transform: scale(1, 1) rotateY(360deg); -webkit-transform: scale(1, 1) rotateY(360deg); }
$(function() { $('.list-mv06').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv06'); } else{ $(this).stop().removeClass('mv06'); } }); });
移動＋フェードイン表示
要素が表示されるエリアまでスクロールしたら、移動＋フェードイン表示しながら要素を表示します。上で紹介した2つのCSSを組み合わせて使用しています。この動きは使い勝手がよく、使用する頻度が高いので覚えておいた方良いです。コピペ使えるくらいでもOK。
<ul class="list"> <li class="list-mv07"><img src="common/img/01.jpg"></li> <li class="list-mv07"><img src="common/img/02.jpg"></li> <li class="list-mv07"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv07"><img src="common/img/01.jpg"></li> <li class="list-mv07"><img src="common/img/02.jpg"></li> <li class="list-mv07"><img src="common/img/03.jpg"></li> </ul> <ul class="list"> <li class="list-mv07"><img src="common/img/01.jpg"></li> <li class="list-mv07"><img src="common/img/02.jpg"></li> <li class="list-mv07"><img src="common/img/03.jpg"></li> </ul>
.list-mv07{ opacity: 0; transform: translate(0,60px); -webkit-transform: translate(0,60px); } .mv07{ opacity: 1.0; transform: translate(0,0); -webkit-transform: translate(0,0); }
$(function() { $('.list-mv07').on('inview', function(event, isInView, visiblePartX, visiblePartY) { if(isInView){ $(this).stop().addClass('mv07'); } else{ $(this).stop().removeClass('mv07'); } }); });