© 2025 JWS

JSを使ったアニメーションanime.jsについて

  • JavaScript
  • Animation

目次

  1. セッティング
    1. HTML の記述
    2. CSS の記述
  2. JS の設定
    1. まずはinviewの設定
    2. 次にアニメーションの設定
  3. まとめ

jsを使ったアニメーションをanime.jsで実装する方法について書きます。

今回は、スクロールして画面上にアニメーションしたい要素が出現したときにイベントが発生するようにするため、jquery.inviewを利用します。

セッティング

各種ライブラリは以下から落としてきます。

jQuery.inview は、なぜか jQuery2 系・3 系では使えないようなので注意

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.inview.min.js"></script>
<script type="text/javascript" src="./js/anime.min.js"></script>

HTML の記述

ライブラリ上で特に class や data 属性の指定をしないといけないというルールはないので、適当で大丈夫です。

複数要素を動かすときにそれぞれの要素に id を振ってあげると楽なので、そこだけセットしておきます。

<div class="container">
  <p id="item01" class="item"><img src="./images/items/01.png" /></p>
  <p id="item02" class="item"><img src="./images/items/02.png" /></p>
</div>

CSS の記述

先に要素をcss上で position:absolute 指定し、それぞれ配置したうえで、動かすようにします。

/*css*/
.contaier {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.item {
  position: absolute;
  /*inviewのイベント発生が遅いので、初期で見えてしまう問題があるので初期状態は消しておく*/
  display: none;
}
#item01 {
  top: 100px;
  left: 150px;
}
#item02 {
  bottom: 200px;
  right: 50px;
}

JS の設定

まずはinviewの設定

以下の記述でinview側はセットできます。

$('.container').one('inview', function (event, visible) {
  // .oneで一度だけイベントを発生させる（スクロールで戻ったあと2度目は発生させないため）
  if (visible) {
    // 要素が見えたときにイベントを発生
    // ここにアニメーションを記載。
  }
});

次にアニメーションの設定

以下の記述で anime の設定をします。

詳細な設定はこちらの公式 DOCUMENT より参照

complete以下を設定してあげることで、移動後（非同期処理）の挙動も設定できます。

$('.container').one('inview', function (event, visible) {
  if (visible) {
    // 初期のdisplayが非表示なので、fadeInで見せる。
    // 注意したいのは、これはreverseで表現できないため、jqueryのfadeInを利用する。
    $('#item01').fadeIn(1000);
    anime({
      targets: '#item01',
      translateY: 200,
      easing: 'easeInOutQuart',
      direction: 'reverse', // reverseを設定することでCSSで配置したゴール位置ところへ移動させます。
      rotate: -10,
      duration: 2000,
      scale: '*=0.6',
      complete: function () {
        //ここから先で移動後の挙動
        anime({
          targets: '#item01',
          duration: 500,
          loop: true,
          direction: 'alternate',
          rotate: 2,
          easing: 'easeInOutSine',
          loop: true
        });
      }
    });
  }
});

こんな感じで設定できます。

direction:reverseを設定することで、CSS であらかじめ設定した場所へ移動します。

他にも on("click")などのイベントを設定すれば click で移動させたりできます。

duration で動きの時間制御と、fadeIn()で表示の速度を制御しています。

まとめ

  • inview と初期表示と fadeIn で苦戦しました。
  • jQuery.inview のチョイスは正直微妙かも。
  • メンテナンスもされていない（4 年前とか）ようなので、何かスクロールで要素が出現したときにイベントを発生させるライブラリがあれば教えてください。
  • アニメーションについては、CSS のみで実装できるものも多いが、複雑な動きを表現したいときの anime.js のチョイスは良さそう
  • 細かく設定していい感じに動くと楽しくなって、ついつい時間をかけすぎてしまうので注意（笑）

Share

Blogs