スクロールアニメーションをプラグイン無しで簡単に作る方法

スクロールして画面内に現れたらアニメーションする、というエフェクトはよくありますし、そのためのプラグインやサンプルコードも沢山あります。

しかし、プラグインを入れたり多くのコードを書いてサイトを複雑にしたくない場合もあります。
プラグインを入れると重くなることもありますからね。

今回は、「プラグイン無し」「JSソースは少なめ」という条件でのアニメーションエフェクトの作り方をご紹介します。
jQueryは使用しますので本体を入れておいてください。

実際のサンプル

まずは実際に動作するサンプルです。
スクロールして画面内に現れたらアニメーションします。最初から画面内にあれば開いた時点で動きます。

それでは、HTML / CSS / JavaScriptの順に一つ一つ解説していきます。

HTMLの記述

HTMLの記述としては、アニメーションさせたい要素にclassとdata-animetion属性を書くだけです。
これ以外のルールなどは特にありません。

<div class="animation" data-animation="slideInUp" >
Animation
</div>

■class=”animation”
JavaScriptで、class=”animation”が付いた要素に対して動作するようにしています。

■data-animation=”slideInUp”
アニメーションの種類をここで指定しています。CSSでセッティングしたアニメーションをここに記述します。

CSSの記述

CSSではアニメーションの設定をします。

以下のソースでは、class=”slideInLeft”で左から現れるアニメーションを設定しています。
しかし、このclassだけではアニメーションは始まらず、class=”animated”が付与されると、その時点からアニメーションが始まるようにしています。
animatedにはanimation-durationが設定されていて、これが無いとアニメーションはしないためです。

後々JavaScriptでclass=”animated”を付与することでアニメーションの起点にしているわけですね。

一点注意ですが、htmlにoverflow-x: hidden;を入れることで、左右の画面外から現れるときに横スクロールが出ないようにしています。

html{
    overflow-x: hidden; /*画面外から現れるアニメーションの為に必要*/
}

/* ====== Animation Setting ====== */

.animation{
    visibility: hidden;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* 左からスラインドイン  ここから下のセットをいくつでも作れる*/
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

slideInLeftの要領で、他にも色々なアニメーションを作れます。
いくつ作っても使い分けができますので、数に限りはありません。

そのため、アニメーション設定だけのCSSを別ファイルで作ってもいいですね。

JavaScriptの記述

JavaScriptで作る機能を言葉にすると以下のようになります。

jQuery(function($) {

function animationSetting(){
    $('.animation').each(function(){
        var obj       = $(this),
            objH      = $(this).outerHeight(),
            scrolled  = $(window).scrollTop(),
            viewed    = scrolled + $(window).height(),
            objTop    = $(this).offset().top,
            objBottom = objTop + objH,
            excnum    = 0.4;
　　　　//もしオブジェクトが画面内にあれば
        if((objTop + objH * excnum) <= viewed && (objBottom - objH * excnum) >= scrolled){
　　　　　　//オブジェクトにclassを付与(アニメーションの種類と起動)
            obj.addClass(obj.data('animation')).addClass('animated');
        }
    })
}

//読み込んだした時点で一度起動
animationSetting();

//スクロールする度に起動
$(window).on('scroll', function() {
    animationSetting();
});

});

ウィンドウサイズやオブジェクトの位置などから、画面内にオブジェクトが在るか算出してclassを付与するというシンプルなソースです。

一点だけポイントはexcnum = 0.4;の値で「オブジェクトが画面内に40%あれば起動する」という設定にしています。
これが無いと、オブジェクトが1pxしか見えてないのにアニメーションしてしまう、といったことになってしまいます。

まとめ

今回ご紹介したJavaScriptソースは、シンプルですがアニメーションの種類をHTMLのdata属性で簡単に切り替えることができるので汎用性は高いと思います。

プラグインを使用した方法もご紹介していますので、こちらもご覧ください。