inview.jsで画面スクロールで特定位置に入ったら要素をアニメーション表示させる方法

2018年8月15日

最近のWEBサイトでは「画面をスクロールしていくと要素が次々とアニメーション表示される」サイトが当たり前になってきている。

今回は「jQuery.inview.js」と「cssアニメーション」をつかって、とても簡単にかつ、色々と応用が効く方法を解説しよう。

画面をスクロールして、要素を次々とアニメーション表示させる方法

まずは全体のロジックの解説。「jQuery.inview.js」を使うことで、画面スクロール中に特定の要素が画面内に入ったことを「イベントとして取得」する事ができる。そのイベントのタイミングを使って、cssアニメーションを実行させるという方法だ。

メモ

シンプルな方法としては、「jQuery.inview.js」で取ったイベントのタイミングで、事前に作ったcssアニメーション用のクラスを、「addClass」でアニメーション表示させたい要素にクラスをつけるという方法が、簡単でオススメ。

この方法の場合、一度アニメーション表示した後、スクロールして上に戻った時、２度目はアニメーションさせない事もできますし、２度目以降も何度もアニメーションさせる事も、どちらでも可能だ。

「jQuery.inview.js」の使い方

事前準備として、 jQuery 1.8以上を読み込んだ上で、GitHubから「jQuery.inview.js」をダウンロードしてきて読み込んでおく。

<script src="common/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="common/js/jquery.inview.js"></script>

その上で以下の記述で表示させたい「要素」と、画面に入った時に「実行する内容」を記述するだけ。

$('要素').on('inview', function() {
// 要素が画面に表示された時に実行する処理を記述
});

実行するアニメーション処理の部分は、Javascriptのアニメーションでも、CSSアニメーションでもどちらでもOK。この部分をゴリゴリに凝れば、複雑なアニメーションもできるという事だ。

具体例

次の具体例は、「.box」というクラスをつけた要素が表示されると同時に「fadeInDown」というアニメーション用のクラスを「addClass」でつけるという記述だ。

$('.box').on('inview', function(){
        $(this).addClass('fadeInRight');
});

CSSアニメーションは、簡単にやるなら次のような感じで

.box{
  opacity:0;
}
.fadeInRight{
  transition: all 0.5s ease-in;
  transform: translateX(40px);
  opacity: 1 !important;
}

これで.boxが最初opacity:0;で透明だが.fadeInRightクラスが付く事で、opacity:1;に変わり、さらにtransform: translateX(40px);40px右に動くアニメーションがつけられる。

transitionを使ったアニメーションを詳しく知りたい方はこちらの記事も参考にみておこう！

▶ CSS3のtransitionでカッコイイ動きの作り方！

transitionでつくるcssアニメーションの完成品「ON/OFF」ボタンを押すとメニューがアニメーションしながら…

戻ったら何度もアニメーションする場合

スクロールして1度アニメーションした後、上にスクロールで戻ると、何度もアニメーションさせたい場合は、isInViewオプションを利用して、条件分岐でremoveClassで一度付与したクラスを取り除けばよい。

つまり、要素を表示している時は「fadeInRightクラス」をつけて、要素を表示していない時は、「fadeInRightクラス」を取り除くという仕組み。

  $('.box').on('inview', function(event, isInView){
    if (isInView) {
        $(this).addClass('fadeInRight');
    }else{
        $(this).removeClass('fadeInRight');
    }
  });

ちなみに上記のコードでも、elseの中身をコメントアウトすれば、１度きりのアニメーションとなる。

jQuery.inview.jsを使った、アニメーションサンプルはこちら

visiblePartX、visiblePartYオプションをつけると動かない？

執筆現在の最新のバージョンでは、以前にあった以下のようなコードにある「visiblePartX、visiblePartY」のオプションが効かないようです。今後改善されるかもしれませんが、現時点ではオプションをつけると動かないので注意が必要です。

 $(‘要素').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
   if (isInView) {
     if (visiblePartY == 'bottom') {
       // 要素が画面に表示された時に実行する処理を記述（※執筆現在このようなオプションをつけたコードでは動かないのでご注意下さい。）
     }
   }
 });

もし特定の要素が見えた瞬間に動くとまずい場合は、その要素の少し下に見えない要素を用意してそこをトリガーにすると良いかもしれない。