スクロール表示時に特定のコンテンツにアニメーションを付加する方法

スクロール表示時に特定のコンテンツにアニメーションを付加する方法:

プログラミング教室ITWORKSのayakaです。

今回はスクロールで特定のコンテンツを表示した際にアニメーションを付加する方法について自分の備忘録も含め記述します。

ちなみにアニメーション自体は独自にCSSでゴリゴリ書いてもいいですが、今回はAnimate.css使わせてもらいました。

今回の実装概要

1.スクロールしたことを検知

2.特定要素が表示されているかの判定

　∟ 特定要素にアニメーションを追加する

スクロールしたことを検知

特定コンテンツがページの最上部にある場合はアニメーションをロード完了時に付与したいため正確にはスクロール時とロード時を検知して処理を行います。

index.html

$(window).on('load scroll', function() { 
    //ロード完了時及びスクロール時の処理 
        addAnimation_by_scroll(target,animate); 
}); 

特定要素が表示されているかの判定

index.html

//ロード完了時及びスクロール時の処理 
//param target <div>等のクラス属性をもつコンテンツ 
//param animate アニメーションを記述したクラス名 
function add_class_in_scrolling(target,animate) { 
    //画面のスクロール位置 
    var scrollTop = $(window).scrollTop(); 
    //画面の高さ 
    var winHeight = $(window).height(); 
    //表示している画面最下部の位置 
    var scrollBottom= scrollTop + winHeight; 
    //表示している画面最下部の位置よりtargetの表示位置が小さい場合 
    if(target.offset().top < scrollBottom) { 
        //targetにアニメーションを記述したクラスを追加します 
        target.removeClass(animate); 
        target.addClass(animate); 
    } 
} 

特定要素にアニメーションを追加する

アニメーションを記述したクラスをaddClassで追加します。

ここで注意したいのは一度きりのアニメーションの場合

既に付けられたままだとアニメーションされません。

つまり、該当クラスを削除して追加する必要があります。