要素が画面に表示されたタイミングでいい感じにアニメーションして表示させたいときの備忘録。
jsライブラリの「jQuery.inview.js」とアニメーションのCSSライブラリ「animated.css」を使用します。
inviewだけでもアニメーションさせることはできますが、より色んなアニメーションをつけたいとき、違うライブラリに変えてみたり試行錯誤してみましたが、「animatede.css」を併用する方法が一番ラクだったので。。。
使用するライブラリ
jQuery.inview.js
animated.css
（使用する際は各サイトから最新版をCHECK）
ライブラリの読み込み
head内に「animated.css」、body閉じタグ前にjQuery本体と「jQuery.inview.js」を記述。
(animated.cssはCDNあるのでそちらを使用・jQuery本体はGoogleのCDN)
<head>
・・・
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/js/jquery.inview.min.js"></script>
</body>
</html>
htmlコード
inviewしたい要素に任意のクラス名と、「animated.css」を適用するためのクラス名「animated」を記述。
<div class="animated inviewfadeInLeft">
fadeInLeft
</div>
<div class="animated inviewlightSpeedIn">
lightSpeedIn
</div>
<div class="animated inviewslideInLeft">
slideInLeft
</div>
jQueryコード
上記htmlコードの場合のjQueryコード。
アニメーションの動きはanimated.cssから選択。
（addClassでつけているクラス名が「animated.css」のクラス名）
$(function() {
$('.inviewfadeInLeft').on('inview', function(event, isInView) {
if (isInView) {
//表示領域に入った時
$(this).addClass('fadeInLeft');
} else {
//表示領域から出た時
$(this).removeClass('fadeInLeft');
$(this).css('opacity',0); //非表示にしておく
}
});
$('.inviewlightSpeedIn').on('inview', function(event, isInView) {
if (isInView) {
$(this).addClass('lightSpeedIn');
} else {
$(this).removeClass('lightSpeedIn');
}
});
$('.inviewslideInLeft').on('inview', function(event, isInView) {
if (isInView) {
$(this).addClass('slideInLeft');
} else {
$(this).removeClass('slideInLeft');
}
});
});
inviewのコールバック関数は「isInView」「visiblePartX」「visiblePartY」の3つ。
「isInView」は要素が表示領域に見えるかどうかで「true」か「false」になる。
「visiblePartX」は要素の左右を基準に、「visiblePartY」は要素の上下を基準にする。
「visiblePartX」は、left・right・both、
「visiblePartY」は、top・bottom・both を選択。
基本は「isInView」でOK。
参考
参考にさせていただきました。ありがとうございます。
http://gimmicklog.main.jp/jquery/581/