JavaScript

レシピ

アニメーション

HTML要素に移動エフィクトをつける

HTML要素を移動させるアニメーションを実装する方法について解説します。

この記事のポイント

  • Web Animations APIでHTML要素の位置を更新することで移動エフィクトをつける

HTML要素を移動させるアニメーション

CSSではHTML要素の位置をleftプロパティrightプロパティtopプロパティbottomプロパティなどで指定します。
JavaScriptのWeb Animations APIを使ってこれらのプロパティの値を変化させることで、HTML要素が移動するアニメーションを実装することができます。

Note

Web Aniamtion APIの基本的な使い方やKeyframeEffectオブジェクトで設定できる内容については「Web Animations APIを使う」をご覧ください。

以下の例はarticle要素topプロパティleftプロパティの値を変化させることで移動するアニメーションを実装しています。
サンプルページはこちら

HTML コード例

<body>
	<article id="content1">
		<h1>JavaScriptレシピ</h1>
		<a id="btn_start" class="btn" href="#">アニメーション開始</a>
	</article>
</body>

CSSでarticle要素topプロパティleftプロパティの初期値を設定します。
ここではいずれも「0」で、ページ左上を起点とします。

CSS コード例

article {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  background-color: #5face7;
}
h1 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 100%;
}
a.btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  font-size: 86%;
  text-decoration: none;
  border-radius: 5px;
  background-color: #4a93cb;
}

KeyframeEffectオブジェクトのコンストラクタにアニメーションの設定を指定します。
シーン1の開始地点からシーン6の終了地点まで、シーンを1つずつ進めていきます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const btn_start = document.getElementById('btn_start');
  const content1 = document.getElementById('content1');

  // KeyframeEffectオブジェクトのインスタンス作成
  var keyframeeffect = new KeyframeEffect(
    content1,
    [
      { // シーン1
        top: '0%',
        left: '0%',
        offset: 0,
        easing: 'ease'
      },
      { // シーン2
        top: '50%',
        left: '50%',
        offset: 0.2,
        easing: 'ease'
      },
      { // シーン3
        top: '80%',
        left: '50%',
        offset: 0.4,
        easing: 'ease'
      },
      { // シーン4
        top: '80%',
        left: '25%',
        offset: 0.6,
        easing: 'ease'
      },
      { // シーン5
        top: '50%',
        left: '0%',
        offset: 0.8,
        easing: 'ease'
      },
      { // シーン6
        top: '0%',
        left: '0%',
        offset: 1
      }
    ],
    {
      duration: 4000,
      direction: 'alternate',
      iterations: 2
    }
  );

  // Animationオブジェクトのインスタンス作成
  var animation = new Animation(keyframeeffect);

  // ボタンが押されたらアニメーション再生
  btn_start.addEventListener('click', function(e){
    e.preventDefault();
    animation.play();
  });
});

シーンが進むごとにtopプロパティleftプロパティの値を更新していきます。

シーンごとに指定しているoffsetの値は再生時間の中における位置になります。
アニメーションの全体の再生時間はdurationで指定した4秒4000ミリ秒)になるので、例えばシーン2の「offset: 0.2」は4000ミリ秒0.2にあたる800ミリ秒の地点に該当します。

同様に、シーン3の「offset: 0.4」は1600ミリ秒の地点、シーン4の「offset: 0.6」は2400ミリ秒の地点、シーン5の「offset: 0.8」は3200ミリ秒の地点、シーン6の「offset: 1」は4000ミリ秒の終了地点になります。

ここでは登場しませんが、同じ要領でrightプロパティbottomプロパティを使った移動のアニメーションを実装することもできます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。