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

プログラミング教室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で追加します。
ここで注意したいのは一度きりのアニメーションの場合
既に付けられたままだとアニメーションされません。
つまり、該当クラスを削除して追加する必要があります。