jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションする方法をご紹介します。
Contents
ディスプレイ広告
コンテンツエリアが画面表示時にアニメーションする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
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。