【CSS/jQuery】スクロールアニメーションを簡単に実装するためのテンプレートを作成した

#139 スクロールアニメーション実装のテンプレートを用意

今回はスクロールアニメーションを簡単に実装するためのテンプレを紹介。waypoints.jsを使用して、Webサイトでよく見かけるスクロールに反応して要素がフェードインするアニメーションを数行のコードで実装するためのテンプレートコードを掲載。

 

目次

[toc]

 

内容

scrollAnimation

今回は上のgifのような、ユーザーのスクロールに反応して要素がフェードインするアニメーションを作成する。

 

使用ライブラリとバージョン

  • jQuery v2.1.4
  • jQuery Easing v1.3
  • Waypoints – 4.0.0 の jquery.waypoints.min.js

 

waypoints.jsとは

waypoints.js

http://imakewebthings.com/waypoints/

waypoints.jsは、要素のスクロール位置に反応して色々できるライブラリ。これで要素にクラスを付けたり取ったりしてCSSアニメーションを当てていく。

複数要素に対して同じクラスでアニメーションを当てることができる点で、今回は生JSではなくjQuery依存のライブラリを使用する。また、waypoints.jsはjQueryの他にzepto.jsというjQuery互換のスマホ向け軽量ライブラリにも対応しているが、今回はjQueryで行う。

 

 

流れ

全体の流れとしては、

  1. waypoints.jsのHPからファイルをダウンロード
  2. jQuery、jQuery EasingもjQueryサイトからダウンロード
  3. jquery.min.js、jquery.easing.1.3.js、jquery.waypoints.min.jsをscriptタグでセット
  4. アニメーション用のCSSをコーディング
  5. jQueryコーディング
  6. アニメーションさせたい要素にCSS設定したクラスを付与

ざっくりとこの流れ。コードは全部以下にテンプレートを用意しているのでコピペで大丈夫。

 

waypoint.jsのHPからファイルをダウンロード

http://imakewebthings.com/waypoints/

ここのDownloadをクリックもしくはGithubからファイルをダウンロードする

./lib/jquery.waypoints.min.jsがあるのでこれを使用する。

 

jQuery、jQuery EasingもjQueryサイトからダウンロード

jQuery:https://jquery.com/download/

jQuery Easing:https://github.com/gdsmith/jquery.easing

それぞれダウンロード。めんどくさければCDNで。

 

jquery.min.js、jquery.easing.1.3.js、jquery.waypoints.min.jsをscriptタグでセット

適当なディレクトリにindex.htmlを作成して以下をコピペ。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>スクロールアニメーション</title>

  <!-- style -->
  <link rel="stylesheet" href="./animate.css">
  <!-- /style -->
</head>
<body>
  <!-- script -->
  <script src="./jquery.min.js"></script>
  <script src="./jquery.easing.1.3.js"></script>
  <script src="./jquery.waypoints.min.js"></script>
  <script src="./scrollAnimation.js"></script>
  <!-- /script -->
</body>
</html>

 

jQueryやらを読み込ませるのに加えて、これから作成するanimate.cssというCSSファイルとscrollAnimation.jsファイルも書いておいた。htmlもcssもjsも今回は全て同じ階層においているのでパスは「./」になっている。

 

アニメーション用のCSSをコーディング

index.htmlを作成したディレクトリにanimate.cssを作成して以下をコピペ。

animate.css

.animate-box {
  opacity: 0;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);*/
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);*/
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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


@keyframes fadeInRight {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);*/
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

 

これはAnimate.css(https://daneden.github.io/animate.css/)というライブラリから今回必要な部分だけをパクってきている。本家を使えばさらに色々なアニメーションを加えられる。

 

jQueryコーディング

同様のディレクトリにscrollAnimation.jsを作成して以下をコピペ。

scrollAnimation.js

$('.animate-box').waypoint(function(direction) {

  // スクロール方向が下かつアニメーションがすでにされていない要素に対して反映させるための分岐
  // 引数directionには、downやupなどスクロールの方向が文字列で入るようwaypointsが用意してくれている
  if(direction === 'down' && !$(this.element).hasClass('animated')) {

    // アニメーション開始のためのanimateクラス付与
    $(this.element).addClass('item-animate');

    // 念の為一瞬遅らせる用のsetTimeout関数
    setTimeout(function(){
      $('body .animate-box.item-animate').each(function(index){
        var el = $(this);

        setTimeout(function () {
          var effect = el.data('animate-effect'); // 要素に与えたdata-animate-effect属性を取得

          // フェードインの種類で分岐してクラス付与
          if (effect === 'fadeIn') {
            el.addClass('fadeIn animated');
          } else if (effect === 'fadeInLeft') {
            el.addClass('fadeInLeft animated');
          } else if (effect === 'fadeInRight') {
            el.addClass('fadeInRight animated');
          } else {
            el.addClass('fadeInUp animated');
          }

          el.removeClass('item-animate'); // 最後にanimateクラスの削除
        }, index * 200, 'easeInOutExpo' ); // 要素のインデックスでタイミングを少しずつ遅らせる。
          
      });
    }, 100);
  }
}, {
  // 画面上から50%下がったところでトリガー起動の設定(適宜調整)
  offset: '50%'
});

 

このコードで要素からクラスを付けたり取ったりして、CSSを変化させることでアニメーションが起こる。

 

アニメーションさせたい要素にCSS設定したクラスを付与

あとはindex.htmlで、アニメーションさせたい要素に対して

<h1 class="animate-box" data-animate-effect="fadeInRight">
  スクロールアニメーション
</h1>

このような形で「animate-box」クラスと、「data-animate-effect」属性を指定するだけ。

最初のgifのやつをそのまま以下に載っける。

 

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>スクロールアニメーション</title>

  <!-- style -->
  <link rel="stylesheet" href="./animate.css">
  <!-- /style -->
</head>
<body>
  <h1 class="animate-box" data-animate-effect="fadeInRight">
    スクロールアニメーション
  </h1>
  <p class="animate-box" data-animate-effect="fadeInUp">
    スクロールに反応してアニメーションフェードインするサンプル<br>
    スクロールに反応してアニメーションフェードインするサンプル<br>
    スクロールに反応してアニメーションフェードインするサンプル<br>
    スクロールに反応してアニメーションフェードインするサンプル<br>
    スクロールに反応してアニメーションフェードインするサンプル<br>
  </p>
  <ul>
    <li class="bg animate-box" data-animate-effect="fadeInUp"></li>
    <li class="bg animate-box" data-animate-effect="fadeInUp"></li>
    <li class="bg animate-box" data-animate-effect="fadeInUp"></li>
    <li class="bg animate-box" data-animate-effect="fadeInUp"></li>
  </ul>
  <p class="animate-box" data-animate-effect="fadeIn">
    fadeIn
  </p>
  <ul>
    <li class="bg animate-box" data-animate-effect="fadeIn"></li>
    <li class="bg animate-box" data-animate-effect="fadeIn"></li>
  </ul>
  <p class="animate-box" data-animate-effect="fadeInLeft">
    fadeInLeft
  </p>
  <ul>
    <li class="bg animate-box" data-animate-effect="fadeInLeft"></li>
    <li class="bg animate-box" data-animate-effect="fadeInLeft"></li>
  </ul>
  <p class="animate-box" data-animate-effect="fadeInRight">
    fadeInRight
  </p>
  <ul>
    <li class="bg animate-box" data-animate-effect="fadeInRight"></li>
    <li class="bg animate-box" data-animate-effect="fadeInRight"></li>
  </ul>
  <p class="animate-box" data-animate-effect="fadeInUp">
    fadeInUp
  </p>
  <ul>
    <li class="bg animate-box" data-animate-effect="fadeInUp"></li>
    <li class="bg animate-box" data-animate-effect="fadeInUp"></li>
  </ul>
  

  <!-- script -->
  <script src="./jquery.min.js"></script>
  <script src="./jquery.easing.1.3.js"></script>
  <script src="./jquery.waypoints.min.js"></script>
  <script src="./scrollAnimation.js"></script>
  <!-- /script -->
</body>
<style>
  body {
    width: 960px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  ul {
    margin: 0;
    padding: 0;
    font-size: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .bg {
    list-style: none;
    display: inline-block;
    width: 49%;
    height: 200px;
    background: #ddd;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
  }
</style>
</html>

 

 

まとめ

Bootstrapで用意されていたアニメーションを参考にして、スクロールアニメーションの部分のみを取り出した。正直他にもライブラリはあるが、Animete.cssとかjQuery Easingとかwaypoint.jsは全て初見だったのでいろんなもんがあるんだなと思った。

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA