JavaScript

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

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

コンテンツエリアが画面表示時にアニメーションする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>

jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションするデモページ

jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションするデモページ

ソース元:jquery.inview

jquery.inview

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。