スクロールに連動して要素が上下するアニメーションをjavascriptとcssで自作してみました【JavaScript・WEBプログラミング・WEB初心者・WEB制作・css animation・css アニメーション・javascript・js-animation・parallax・スクロールアニメーション・パララックス】

posted on 2020.12.14

スクロールに合わせて要素をアニメーションさせるスクロールアニメーション。今回は、スクロール上下の動きに合わせて要素が上下するアニメーションをjquery(javascript)のプラグインとして自作してみました。上部、下部へのスクロール量に連動して要素がアニメーションするよに制作してあります。

スクロールに連動するアニメーション　デモ、html 、css、javascript

今回制作したスクロールに連動して上下するアニメーションのデモやhtml、css、javascriptのソースを先に示してから解説に入りたいと思います。

demo

html

<!DOCTYPE html>
<html>
    <head>
        <title>スクロールに連動するアニメーション</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="スクロールすると連動して動くアニメーションをjavascriptで制作してみました。| overは湘南（茅ヶ崎市、藤沢市、平塚市）を拠点にホーム（ウェブ）ページ制作・作成を行うウェブ制作会社です。湘南でホームページのことならぜひoverにご相談下さい。">

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="para.js" type="text/javascript"></script>
        <link href="para.css" rel="stylesheet" type="text/css"/>

    </head>
    <body>


        <div>
            Go Scroll</div>
        <div class="para">
            <img src="image/coffee.jpg" alt=""/>
        </div>

        <div>
            </div>

    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>スクロールに連動するアニメーション</title>

</head>

<body>

<div>

Go Scroll</div>

</div>

<div>

</div>

</body>

</html>

css

*{
    box-sizing: border-box;
    border: none;
    padding: 0;
    margin: 0;
}


body{

}

h1{
    margin: 0 0 10em;
}

div{
    margin: 0 0 25em;
}

.para{
    height: 500px;
    overflow: hidden;
    margin: 0 30%;
}

.para img{
    width: 100%;
    height: auto;
}

box-sizing: border-box;

border: none;

padding: 0;

margin: 0;

}

body{

}

h1{

margin: 0 0 10em;

}

div{

margin: 0 0 25em;

}

.para{

height: 500px;

overflow: hidden;

margin: 0 30%;

}

.para img{

width: 100%;

height: auto;

}

javascript

(function ($) {

    $(document).ready(function () {

        $('.para').ak_paraPlug();

    });
})(jQuery);

(function ($) {

    $.fn.ak_paraPlug = function () {


        var lastScrollTop = 0;
        var flag = '';
        var self = this;
        var offset;
        var st = 0;
        var f = 0;
        var i = 0;
        var h;
        h = $(this).height();

        $(self).find('img').on('load', function () {
            //画像ロードが終了したら画像のオフセットを取得
            offset = self.offset();
        });

        var t = function (d) {
            //画像のオフセットからスクロールトップを引く
            f = offset.top - d;
            //200以下なら下記を実行
            if (f < 200) {
                //フラグがトゥルー（下部スクロール）なら
                if (flag == true) {
                    i--;
                    if (i > -100) {
                        self.find('img').css({'transform': 'translateY(' + i + 'px)'});
                    }

                }
                ;
                //フラグがフォルス （上部スクロール）  なら  
                if (flag == false) {

                    i++;
                    //console.log(i);
                    if (i < 100) {
                        self.find('img').css({'transform': 'translateY(' + i + 'px)'});
                    }

                }
                ;
            } else {
                self.find('img').css({'transform': ''});
                i = 0;
            }


        }

        $(window).scroll(function () {
//現在のスクロールトップを常時監視して上下スクロールを判断
            st = $(this).scrollTop();

            t(st);


            if (st > lastScrollTop) {

                flag = true;

            } else {

                flag = false;
            }

            lastScrollTop = st;


        });



    };


})(jQuery);

(function ($) {

$(document).ready(function () {

$('.para').ak_paraPlug();

});

})(jQuery);

(function ($) {

$.fn.ak_paraPlug = function () {

var lastScrollTop = 0;

var flag = '';

var self = this;

var offset;

var st = 0;

var f = 0;

var i = 0;

var h;

h = $(this).height();

$(self).find('img').on('load', function () {

//画像ロードが終了したら画像のオフセットを取得

offset = self.offset();

});

var t = function (d) {

//画像のオフセットからスクロールトップを引く

f = offset.top - d;

//200以下なら下記を実行

if (f < 200) {

//フラグがトゥルー（下部スクロール）なら

if (flag == true) {

i--;

if (i > -100) {

self.find('img').css({'transform': 'translateY(' + i + 'px)'});

}

;

//フラグがフォルス（上部スクロール）なら

if (flag == false) {

i++;

//console.log(i);

if (i < 100) {

self.find('img').css({'transform': 'translateY(' + i + 'px)'});

}

;

} else {

self.find('img').css({'transform': ''});

i = 0;

}

$(window).scroll(function () {

//現在のスクロールトップを常時監視して上下スクロールを判断

st = $(this).scrollTop();

t(st);

if (st > lastScrollTop) {

flag = true;

} else {

flag = false;

}

lastScrollTop = st;

});

};

})(jQuery);

スクロールに連動するアニメーション解説

スクロールアニメーションの多くは画像を使用することが多いと思うので、今回も画像を使用します。そのが画像にtransform:translateを設定してスクロールの上下に連動して変化させています。

最初に、画像のロードが終了したら画像のオフセットを取得します。

次にwidonw.scrollの中でスクロールのトップを常時監視して上下スクロールを判定します。ここがこのプログラムの肝になるところです。

あとは取得したデーターによって、transform:translateの値をスクロールが呼びださるごとに変化させているだけです。

このプログラムの肝はwindow.scrollの中での処理だけで得に難しいことはないと思います。

まとめ

以上でスクロールに連動して要素が上下するアニメーションの解説は終わりになります。いかがだったでしょうか。初めから複雑なアニメーションを求めると自分の中でいらないブラックボックスを自分で作ってしまいます。まずは単純な構造を積み重ねて徐々にステップアップできると良いですね。それではまた。