こちらのサイトで画面をスクロールして動きが確認できます。
DEMO
1.GitHubからファイルをダウンロード
下記のサイトより、必要なファイルをダウンロードします。
https://github.com/protonet/jquery.inview
2.ファイルをリンクさせる
リンク先は各環境に合わせて配置してください。下記はjQueryのCDNを使用しています。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.inview.min.js"></script>
3.クラスを追加する
アニメーションさせたい要素に任意のクラス名を追加します。下記のソースコードでは「inviewbox」という名前のクラス名に設定しています。
<div class="inviewbox">
~ アニメーションさせたい要素 ~
</div>4.jsコードを追加
下記のjsコードつ追加します。この場合、スクロール１回でアニメーションがは終了します。数値は任意のものをサイトに合わせ適当なものに修正してください。
$(function() {
$('.inviewbox').css('opacity', 0);
$('.inviewbox').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
$(this).stop().animate({opacity: 1}, 1400);
}
});
});
繰り返しアニメーションを表現させたい場合は下記のelse文を用いてください。
else {
$(this).stop().animate({opacity: 0}, 300);
}こちらのサイトで画面をスクロールして動きが確認できます。
DEMO