ポータルサイトを今どきのサイトに見せる！jQueryとAnimate.cssでスクロールアニメーションを実装 | ポータルサイトHack

2019/3/27

スクロールをすると要素があらわれるアニメーションが施されたサイトを最近よく見かけるようになりました。
凝った作りのものはがっつりプログラムを組まないといけませんが、少しの工夫でかっこいいアニメーションを実装できます。
ポータルサイトにも利用できると思うので参考にしてみてください。

Animate.cssとは

今回は「Animate.css」とjQueryを利用します。
Animate.cssとはCSS※だけでアニメーションを実装できるスタイルシートです。
ダウンロードして読み込むだけで準備は完了なので利用しない手はありません。
※CSS3に対応したブラウザが対象となります。

Animate.css
https://daneden.github.io/animate.css/

Animate.cssの基本的な使い方

ダウンロードしたAnimate.cssをHTMLファイルに読み込みます。
サイトのタグ内に下記のように読み込みます。


<head>
<link href="animate.css" rel="stylesheet" type="text/css" media="all" />
</head>

次に動かしたい要素に、クラスを付けます。
フェードインの場合下記になります。


<div class="animated fadeIn">FADE IN</div>

スクロールの位置をjQueryで判定

次にjQueryを使ってスクロールの位置を判定しますが、今回は簡単にアニメーションを実装することが目的なので、最低限の記述になります。
今回はCDNからjQueryを読み込むことにします。
Animate.cssと合わせると下記のようになります。


<head>
<link href="animate.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

準備が整ったら実際の設定に移ります。
仕様としては、アニメーションを施す要素のトップにスクロールが達した際に、クラスを追加するという至ってシンプルなものになります。
下記が実際のコードです。


<script>
$(function(){
	$(window).scroll(function (){
        //現在のスクロールの位置
        var scroll = $(window).scrollTop();
        //アニメーションを施す要素の位置
        var box = $('.box').offset().top;
        //スクロールが要素に達したらアニメーションのクラスを追加
        if(scroll>box*0.9){
            $('.box').addClass('animated bounceIn')
        }
    });
});
</script>

仕組みを理解するための基本的な設定ですが、改良していけば下記のサイトのような様々なアニメーションを設定することができますので、参考にしてください。

TKCV Investment Partnership

いい税理士見つけたj

まとめ

今回はスクロールに連動したアニメーションの実装方法を紹介させていただきました。
アニメーションに関しては今後も需要が高まっていくと思うので、一つの手法としてお役立ていただきたいと思います。