スクロールに合わせて要素が動くアニメーションを自作してみた【JavaScript・WEBプログラミング・WEB初心者・WEB制作・css・css animation・css アニメーション・javascript・js-animation・parallax・スクロールアニメーション・パララックス】

posted on 2020.12.12

スクロールすると要素がスクロールにあわせて動くスクロールアニメーションは多くのウェブサイトで使用されていて、現在のウェブ制作においては重要な技術の一つになっていると思います。スクロールに合わせて動くアニメーションの作り方は様々で、多くのJavaScriptライブラリーでもプラグインとして制作されていますが、今回はウェブ制作初心者の方でも理解して頂けるように簡易的なJqueryのプラグインとして記述してみました。親要素のボックスのスクロールトップに合わせて、それぞれの要素が縦移動、横移動、回転するように制作しています。

スクロールするとそれに合わせて動くアニメーションを今回は、「cssを直接的な書き換えで実装する方法」と「class属性の付け替えで実装する方法」の二つの方法で制作してみました。

スクロールアニメーションの制作。【cssを直接書き換える】

スクロールに合わせてcssを書き換えるとこでアニメーションさせる方法のデモとコードを先に示して解説していこうと思います。

demo

html

<!DOCTYPE html>
<html>
    <head>
        <title>スクロールアニメーション　縦、横、回転 classで実装</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="anime.js" type="text/javascript"></script>
        <link href="anime.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <header><button><a href="#anime">push!!</a></button></header>
        <article>
            <section></section>
            <section id="anime">

                <div class="move">
                    <img src="image/mirror.png" alt=""/>
                </div> 

                <div class="move"><img src="image/photo.jpg" alt=""/></div> 
                <div class="move"> <img src="image/rose.png" alt=""/></div> 

            </section>
        </article>

    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>スクロールアニメーション　縦、横、回転 classで実装</title>

</head>

<body>

</div>

</section>

</article>

</body>

</html>

css

*{
    box-sizing: border-box;
    border: none;
}

body{

}

header{
    text-align: right;
}

button{
    width: 50px;
    height: 50px;
    background: #9999ff;
    border-radius: 100%;

}

article{
    width: 100%;
    overflow: hidden;

}

section{
    width: 100%;

    min-height: 30em;
}

#anime{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

}

#anime > div{
    width: 33%;
    text-align: center;
    position: relative;
}



#anime > div:nth-child(1){


}

#anime > div:nth-child(2) {


}

#anime > div:nth-child(3){


}

#anime > div img{
    position: relative;
    width: 100%;
    height: auto;
    transition:  all .7s ease-in .1s;
}

#anime > div:nth-child(1) img{
    width: 45%;
    height: auto;
    margin: 90% -130% 0 0;
    z-index: 30;
    transform: rotate(172deg);
}

#anime > div:nth-child(2) img {
    width: 70%;
    height: auto;
    transform: translate(0 ,-80%);
}

#anime > div:nth-child(3) img{
    width: 50%;
    height: auto;
    margin: 90% 0 0 -130%;
    z-index: 30;
    transform: translate(100% ,0);
    opacity: 0;
}

box-sizing: border-box;

border: none;

}

body{

}

header{

text-align: right;

}

button{

width: 50px;

height: 50px;

background: #9999ff;

border-radius: 100%;

}

article{

width: 100%;

overflow: hidden;

}

section{

width: 100%;

min-height: 30em;

}

#anime{

width: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

}

#anime > div{

width: 33%;

text-align: center;

position: relative;

}

#anime > div:nth-child(1){

}

#anime > div:nth-child(2) {

}

#anime > div:nth-child(3){

}

#anime > div img{

position: relative;

width: 100%;

height: auto;

transition: all .7s ease-in .1s;

}

#anime > div:nth-child(1) img{

width: 45%;

height: auto;

margin: 90% -130% 0 0;

z-index: 30;

transform: rotate(172deg);

}

#anime > div:nth-child(2) img {

width: 70%;

height: auto;

transform: translate(0 ,-80%);

}

#anime > div:nth-child(3) img{

width: 50%;

height: auto;

margin: 90% 0 0 -130%;

z-index: 30;

transform: translate(100% ,0);

opacity: 0;

}

javascript

(function ($) {

    $(document).ready(function () {

        $('#anime').ak_anime_plug();

    });
})(jQuery);
(function ($) {

    $.fn.ak_anime_plug = function () {
        var self = this;
        var offset;
        var dist;
        var top;

        function ak_parallax() {
            //cssファイルで設定したプロパティーの値をデフォルトに戻す。

            $(self).find('img').css({'transform': 'translate(0%, 0%) scale(1) rotate(0deg)', 'opacity': '1'});

        }

        function ak_parallax_destroy() {
            //デフォルトに戻した値に空の値を代入

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

        }

        $(window).scroll(function () {
            offset = self.offset();
            top = $(this).scrollTop();
            dist = offset.top - top;

            if (dist < 100) {
                //親要素のボックスのトップのY座標とスクロールトップの差が100以下ならデフォルト

                ak_parallax();
            } else {
                //それ以外なら空の値を代入

                ak_parallax_destroy();
            }
        });

    };

})(jQuery);

(function ($) {

$(document).ready(function () {

$('#anime').ak_anime_plug();

});

})(jQuery);

(function ($) {

$.fn.ak_anime_plug = function () {

var self = this;

var offset;

var dist;

var top;

function ak_parallax() {

//cssファイルで設定したプロパティーの値をデフォルトに戻す。

$(self).find('img').css({'transform': 'translate(0%, 0%) scale(1) rotate(0deg)', 'opacity': '1'});

}

function ak_parallax_destroy() {

//デフォルトに戻した値に空の値を代入

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

}

$(window).scroll(function () {

offset = self.offset();

top = $(this).scrollTop();

dist = offset.top - top;

if (dist < 100) {

//親要素のボックスのトップのY座標とスクロールトップの差が100以下ならデフォルト

ak_parallax();

} else {

//それ以外なら空の値を代入

ak_parallax_destroy();

}

});

};

})(jQuery);

スクロールアニメーションの制作。【cssを直接書き換える】解説

最初はcssフィルに書き込まれているtransformプロパティーやopacityプロパティーの値でそれぞえれの要素が表示されます。

サイト下部に向かってスクロールして、スクロールトップのｙ座標から親要素のボックスのオフセットトップのｙ座標の値を引いた値が100以下ならば、ak_parallax関数を実行して、それぞれの要素のcssにデフォルトの値を与えて、アニメーションを実行します。

サイト上部にスクロールしてif文の条件からはずれた場合各プロパティーの値に空の値が代入され、それぞれの要素に元のcssファイルの値が設定し直されます。

スクロールアニメーションの制作。【class属性をつけ換える】

前章は、cssを直接操作することでスクロールアニメーションさせていましたが、今度は、class属性の付け替えでアニメーションさせてみます。

スクロールに合わせてclass属性を付け換えるとこでアニメーションさせる方法のデモとコードを先に示して解説していこうと思います。

demo

html

上記と同じファイルなので割愛します。

css

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

body{

}

header{
    text-align: right;
}

button{
    width: 50px;
    height: 50px;
    background: #9999ff;
    border-radius: 100%;

}

article{
    width: 100%;
    overflow: hidden;

}

section{
    width: 100%;

    min-height: 30em;
}

#anime{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

}

#anime > div{
    width: 33%;
    text-align: center;
    position: relative;
}



#anime > div:nth-child(1){


}

#anime > div:nth-child(2) {


}

#anime > div:nth-child(3){


}

#anime > div img{
    position: relative;
    height: auto;
    transition:  all .7s ease-in .1s;
}

#anime > div:nth-child(1) img{
    width: 45%;
    height: auto;
    margin: 90% -130% 0 0;
    z-index: 30;

}

#anime > div:nth-child(2) img {
    width: 70%;
    height: auto;
}

#anime > div:nth-child(3) img{
    width: 50%;
    height: auto;
    margin: 90% 0 0 -130%;
    z-index: 30;
}

#anime > div.move:nth-child(1) img{
    width: 45%;
    height: auto;
    margin: 90% -130% 0 0;
    z-index: 30;
    transform: rotate(172deg);
}

#anime > div.move:nth-child(2) img {
    width: 70%;
    height: auto;
    transform: translate(0 ,-80%);
}

#anime > div.move:nth-child(3) img{
    width: 50%;
    height: auto;
    margin: 90% 0 0 -130%;
    z-index: 30;
    transform: translate(100% ,0);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

margin: 0;

padding: 0;

box-sizing: border-box;

border: none;

}

body{

}

header{

text-align: right;

}

button{

width: 50px;

height: 50px;

background: #9999ff;

border-radius: 100%;

}

article{

width: 100%;

overflow: hidden;

}

section{

width: 100%;

min-height: 30em;

}

#anime{

width: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

}

#anime > div{

width: 33%;

text-align: center;

position: relative;

}

#anime > div:nth-child(1){

}

#anime > div:nth-child(2) {

}

#anime > div:nth-child(3){

}

#anime > div img{

position: relative;

height: auto;

transition: all .7s ease-in .1s;

}

#anime > div:nth-child(1) img{

width: 45%;

height: auto;

margin: 90% -130% 0 0;

z-index: 30;

}

#anime > div:nth-child(2) img {

width: 70%;

height: auto;

}

#anime > div:nth-child(3) img{

width: 50%;

height: auto;

margin: 90% 0 0 -130%;

z-index: 30;

}

#anime > div.move:nth-child(1) img{

width: 45%;

height: auto;

margin: 90% -130% 0 0;

z-index: 30;

transform: rotate(172deg);

}

#anime > div.move:nth-child(2) img {

width: 70%;

height: auto;

transform: translate(0 ,-80%);

}

#anime > div.move:nth-child(3) img{

width: 50%;

height: auto;

margin: 90% 0 0 -130%;

z-index: 30;

transform: translate(100% ,0);

}

javascript

(function ($) {

    $(document).ready(function () {
        // $('div').addClass('invisible');


        $('#anime').ak_anime_plug();


    });
})(jQuery);
(function ($) {



    $.fn.ak_anime_plug = function () {


        var self = this;
        var offset;
        var timer;
        var dist;
        var top;

        function ak_parallax() {

            $(self).find('div').removeClass('move');

        }

        function ak_parallax_destroy() {

            $(self).find('div').addClass('move');


        }

        $(window).scroll(function () {
            offset = self.offset();
            top = $(this).scrollTop();
            dist = offset.top - top;
            //  console.log(dist);
            if (dist < 100) {
                ak_parallax();
            } else {
 ak_parallax_destroy();
            }
        });

    };

})(jQuery);

(function ($) {

$(document).ready(function () {

// $('div').addClass('invisible');

$('#anime').ak_anime_plug();

});

})(jQuery);

(function ($) {

$.fn.ak_anime_plug = function () {

var self = this;

var offset;

var timer;

var dist;

var top;

function ak_parallax() {

$(self).find('div').removeClass('move');

}

function ak_parallax_destroy() {

$(self).find('div').addClass('move');

}

$(window).scroll(function () {

offset = self.offset();

top = $(this).scrollTop();

dist = offset.top - top;

// console.log(dist);

if (dist < 100) {

ak_parallax();

} else {

ak_parallax_destroy();

}

});

};

})(jQuery);

スクロールアニメーションの制作。【class属性をつけ換える】解説

最初にウェブサイトが表示される時、それぞれの要素にmoveクラスが指定されていて、cssファイルの中でmoveクラスを含んだ形でのプロパティーの設定に従って表示されています。

前章同様、サイト下部に向かってスクロール動作を行い、スクロールトップのｙ座標から親要素のボックスのオフセットトップのｙ座標の値を引いた値が100以下ならば、ak_parallax関数を実行して、moveクラスを削除することで、アニメーションを実行します。

サイト上部にスクロールしてif文の条件からはずれた場合削除したmoveクラスを付け加え直すことで、最初に表示された状態に戻します。

スクロールに合わせて要素が動くアニメーションの作り方まとめ

今回は、スクロールに合わせて要素の縦移動、横移動、回転、オパシティーなどが変化するjavascriptをjqueryのプラグインとして作成してみましたが、いかがだったでしょうか？。記事を読んで頂いた方のお役に少しでも立てていれば幸いです。それではまた。