jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションする方法 DAD UNION

jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションする方法をご紹介します。

Contents

コンテンツエリアが画面表示時にアニメーションするCSSの記述
コンテンツエリアが画面表示時にアニメーションするHTMLの記述
jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションするJavaScriptの記述
jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションするデモページ
ソース元：jquery.inview

コンテンツエリアが画面表示時にアニメーションするCSSの記述

※様々な動きのパターンを集めたCSSライブラリanimate.min.cssファイルを読み込みます。アニメーション表示するコンテンツエリアギャラリー表示エリア（div）のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding-top: 20px;
}
p{
  padding-bottom: 600px;
  font-size: 18px;
}
div {
  text-align:center;
  width:400px;
   padding:50px 0;
  margin:100px auto;
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

コンテンツエリアが画面表示時にアニメーションするHTMLの記述

※アニメーション表示するコンテンツエリア（class=”box1 animated”、class=”box2 animated”、class=”box2 animated”）に画像（1.jpg～3.jpg）を用意します。必要に応じて変更して下さい。

<h1>jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションします。</h1>
<p>下に600pxスクロールして下さい。</p>

<div class="box1 animated"><img src="1.jpg" width="100%"></div>
<div class="box2 animated"><img src="2.jpg" width="100%"></div>
<div class="box3 animated"><img src="3.jpg" width="100%"></div>

jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションするJavaScriptの記述

※jquery.min.js（1系）、jquery.inview.min.jsファイルを読み込みます。$(‘アニメーション表示するコンテンツエリア’).on(‘inview’, function (event, param) {アニメーション処理})を記述することで「アニメーション表示するコンテンツエリア」にアニメーション処理が実行されます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='jquery.inview.min.js'></script>
<script>
$(function () {
  $('.box1').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('fadeInDown');
    } else {
      $(this).removeClass('fadeInDown');
      $(this).css('opacity', 0);
    }
  });

  $('.box2').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }
  });

  $('.box3').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('lightSpeedIn');
    } else {
      $(this).removeClass('lightSpeedIn');
    }
  });

});
</script>