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オブジェクトのインスタンス作成
	let 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オブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

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

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

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

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

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

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

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

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