JavaScript | animate()で斜め移動アニメーション

2022-03-13JavaScript アニメーション サンプル集,JavaScript

JavaScriptのanimate()メゾッドを使った使った要素や画像、テキストを斜めに移動させるアニメーションの実装サンプルを紹介しています。

斜め移動アニメーション

animate()メゾッドを利用した要素を斜めに移動させるアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。

See the Pen JavaScript | Scale animation with animate by yochans (@yochans) on CodePen.

HTMLにはアニメーションさせたい要素にdivタグで「.item」、斜め移動のパターンとして「.translate」と「.position」の2タイプを設置しています。

<div class="item translate"></div>
<div class="item position"></div>

斜めに移動させたいHTML要素には以下のCSSを指定しています。

.item {
	width: 80px;
	height: 80px;
	background: #4169e1;
	margin: 20px;
}

.position {
	position: absolute;
	background: #f08080;	
}

translateで斜め移動アニメーション

animate()メゾッドで「transform」プロパティの「translate」を指定して要素を斜めに移動させるサンプルコードです。

document.querySelector(`.translate`).animate(
	[
		{ transform: 'translate(0, 0)' },
		{ transform: 'translate(100px, 100px)' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

positionで斜め移動アニメーション

animate()メゾッドで絶対値を指定して要素を斜めに移動させるサンプルコードです。

サンプルでは右下から左上に移動するように数値を指定しています。

document.querySelector(`.position`).animate(
	[
		{ top: '100px', left: '100px' },
		{ top: '0px', left: '0px' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

オプションには「iterations: Infinity」と「direction: 'alternate’」を指定して無限ループするようにしています。
関連：JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES