今風のWebサイトはただ情報を表示するだけでなく、ユーザーを楽しませる演出・アニメーションを取り入れているものが多くあります。
その中でも色んなWebサイトで見られるスクロールに合わせて表示するアニメーション。
これを取り入れるだけでWebサイトは一気に華やかになります。
しかし、毎回同じアニメーションばかりになりがちで、たまには他のアニメーションを取り入れてみたいと思いませんか？

この記事ではスクロールに合わせて画像を表示するアニメーションを10個ご紹介したいと思います。

前提条件

この記事でご紹介するコードは以下のHTMLをベースとしています。

<figure class="view"><img src="25352828_s.jpg"></figure>

そして、class="view"を設定したタグが、画面内に入ったタイミングでjQueryを使い、アニメーションを設定したクラスclass="js-on"を追加することで動作するようになっています。

jsコードはこちら。

$(window).on('load scroll',function(){
    $('.view').each(function(){
        let viewPos = $(this).offset().top;
        let scrollPos = $(window).scrollTop();
        let winHeight = $(window).height();
        if( scrollPos > viewPos - winHeight ){
            $(this).addClass('js-on');
        }
    });
});

そして、以下のクラスにアニメーションとなるCSSをそれぞれ設定します。

.js-on{
    /* 以下のCSSアニメーションを設定 */

}

下からフワッと表示するアニメーション

下からフワッと表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    transform: translateY(30px);
    opacity: 0;
    transition: all .3s ease-in-out .3s;
}
.view img{
    vertical-align: middle;
}
.view.js-on{
    transform: translateY(0px);
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

マスク表示するアニメーション①

マスク表示するアニメーション①の場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    transform: translateX(0%);
    transition: all .3s ease-in-out .3s;
}
.view img{
    vertical-align: middle;
    transform: translateX(0%);
}
.view.js-on::after{
    transform: translateX(100%);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

マスク表示するアニメーション②

マスク表示するアニメーション②の場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #eee;
    transform: translateX(-100%);
    transition: all .3s ease-in-out .3s;
}
.view img{
    vertical-align: middle;
    transform: translateX(-100%);
}
.view.js-on::after{
    animation: viewinMask 1s ease-in-out forwards;
}
.view.js-on img{
    animation: viewinImg 1s ease-in-out forwards;
}
@keyframes viewinMask{
    0%{
        transform: translateX(-100%);
    }
    40%{
        transform: translateX(0%);
    }
    60%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(100%);
    }
}
@keyframes viewinImg{
    0%{
        transform: translateX(-100%);
    }
    40%{
        transform: translateX(0%);
    }
    60%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
    }
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

拡大してある画像を元サイズにして表示するアニメーション

拡大してある画像を元サイズにして表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view img{
    vertical-align: middle;
    transform: scale(1.3);
    opacity: 0;
    transition: all .3s ease-in-out .3s;
}
.view.js-on img{
    transform: scale(1);
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぼかした状態から表示するアニメーション

ぼかした状態から表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view img{
    vertical-align: middle;
    filter: blur(10px);
    opacity: 0;
    transition: all .3s ease-in-out .3s;
}
.view.js-on img{
    filter: blur(0px);
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

白いグラデーションで表示するアニメーション

白いグラデーションで表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view::after{
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    transform: translateX(-50%);
    transition: all .3s ease-in-out .3s;
}
.view img{
    vertical-align: middle;
}
.view.js-on::after{
    animation: viewinMask 1s ease-in-out forwards;
}
@keyframes viewinMask{
    0%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(50%);
    }
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

拡大しながら表示するアニメーション

拡大しながら表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view img{
    vertical-align: middle;
    transform: scale(0);
    transition: all .3s ease-in-out .3s;
}
.view.js-on img{
    transform: scale(1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

拡大＋ぼかした状態から表示するアニメーション

ここからは先ほどまでご紹介したアニメーションを組み合わせたものになります。

拡大＋ぼかした状態から表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view img{
    vertical-align: middle;
    filter: blur(10px);
    transform: scale(1.3);
    opacity: 0;
    transition: all .3s ease-in-out .3s;
}
.view.js-on img{
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぼかした状態＋下からフワッと表示するアニメーション

ぼかした状態＋下からフワッと表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view img{
    vertical-align: middle;
    filter: blur(10px);
    transform: translateY(30px);
    opacity: 0;
    transition: all .3s ease-in-out .3s;
}
.view.js-on img{
    filter: blur(0px);
    transform: translateY(0px);
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

フリップ表示するアニメーション

フリップ表示するアニメーションの場合は以下のCSSを指定します。

.view{
    width: 250px;
    position: relative;
    overflow: hidden;
}
.view img{
    vertical-align: middle;
    transform: rotateY(90deg);
    transition: all .3s ease-in-out .3s;
}
.view.js-on img{
    transform: rotateY(0deg);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
CSSの指定をちょっと変えるだけでアニメーションの印象が大きく変わりますね。
また、秒数を変えるだけでもまた違った印象になります。
デザインによって向き不向きのアニメーションはありますが、今回ご紹介したアニメーションは比較的どんなデザインでも違和感なく使うことが出来るものばかりです。
是非、作成中のWebサイトのアニメーションの参考にしてみて下さい。