【jQuery】スクロールして可視範囲に到達したら画像にアニメーションつきで表示する

jQueryでスマホなどでスクロールして行くと画面が見える範囲に到達したら画像などにアニメーションをつけてスライドさせる方法

スクロールアニメーションのサンプル
動かす領域の位置を取得
JavaScriptでスクロールした時のイベントを作る
cssでスクロールした時のアニメーションを作る

jQuery関連記事

スクロールアニメーションのサンプル

【jQuery】スクロールして可視範囲に到達したら画像などにアニメーションをつけて表示する方法

動かす領域の位置を取得

html

<div id="main">
    コンテンツ
    <div class="move hidden">
        <img src="./001.png" class="left">
        <img src="./003.png" class="right">
    </div>
    コンテンツ
    <div class="move hidden">
        <img src="./001.png" class="left">
        <img src="./003.png" class="right">
    </div>
</div>

JavaScript

var margin = 400,   //ウインドウ上部からどれぐらいの位置で変化させるか
    sectionoffset = new Array;
    
$('div.move.hidden').each(function(k) {
    sectionoffset[k] = $(this).offset().top;
});

今回動かす要素をdiv class=”move hidden”の中に入れているので、この要素のそれぞれの縦位置を取得します。
$(‘div.move.hidden’)というのはdivタグのclassにmoveとhiddenが両方ついているという指定方法です。

それぞれの位置を$(this).offset().top;で取得して配列に格納していきます。

JavaScriptでスクロールした時のイベントを作る

JavaScript

$(window).scroll(function () {
    scrollY = $(window).scrollTop();
    for (var m = 0; m <= sectionoffset.length - 1; m++) {
        if (scrollY + margin > sectionoffset[m] && sectionoffset[m] != "") {
            var n = m + 1;
            sectionoffset[m] = "";
            $('div.move:nth-of-type(' + n +')').removeClass('hidden');
        }
    } 
});

scrollY = $(window).scrollTop();で現在のスクロール位置を取得します。

あとは各要素の位置と現在のスクロール位置を比較すればいいだけですね！

for (var m = 0; m <= sectionoffset.length - 1; m++) {で
各要素の数だけfor文でそれぞれの位置と比較します。
sectionoffset.length – 1としているのはデモの例でいうと、
配列kは0から始まって5まで、要素の数が1から始まって6までように対応する数字がずれて存在しない配列を参照しないようにしています。

if (scrollY + margin > sectionoffset[m] && sectionoffset[m] != “”) {で
現在のスクロール位置をと初めに定義したmarginの高さ分の合計と、
各要素の位置を比べて現在のスクロール位置の方が大きければ処理をします。

marginの値を設定している意味は、
例えばブラウザの一番上にボーダーが引いてある状態をイメージするとわかりやすいかもです。
ボーダーを超えたらイベントが発生します。
でもスクロールしている最中にブラウザの一番上でアニメーションが起きても目立たず、気づかずにスルーしてしまう可能性だってあります。
そういったことをなくすためにボーダーの位置を下げて見やすい位置でアニメーションをすると目に留まりやすくなります。

なのでmarginを指定するとその分だけ現在のスクロール位置に加算されるので見やすい位置でイベントを発生させることができます。

スクロールがトリガーのイベントはしょっちゅう呼び出されるため処理回数が多くなりがちです。
処理軽減のために次の処理をしています。

・アニメーションが起きた要素の縦位置を削除する。
・縦位置がない配列番号の処理をしない

とすることでfor文で処理する回数は変えられないですが、すべてで処理を行うより、if文で分岐して処理を少なくしています。

cssでスクロールした時のアニメーションを作る

処理部分の$(‘div.move:nth-of-type(‘ + n +’)’).removeClass(‘hidden’);はdivからhiddenのクラスを取っているだけです。
アニメーションの部分はcssでちゃちゃっと済ませると簡単ですね！

div.move{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 150px;
}
div.move.hidden .left{
    position: absolute;
    left: -50%;
}
div.move.hidden .right{
    position: absolute;
    right: -50%;
}
div.move .left{
    position: absolute;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
div.move .right{
    position: absolute;
    right: 0;
    -webkit-transition: .55s ease-in-out;
    -moz-transition: .55s ease-in-out;
    transition: .55s ease-in-out;
}

ざっくりつくったので作りこめばもっと素敵な動きを付けれると思います。
なにしてるかはdiv.move.hiddenのときは枠外に隠しておいて、イベント発生時にJavaScriptでhiddenを外すのでdiv.moveだけになったら表示される位置に動くという簡単なものです。

要素によって違うクラスで動きも指定すると面白そうですね！

長くなりましたがこれでスクロール位置でアニメーションを付けることができると思います。