JavaScript | animate()で落下アニメーション

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

JavaScript | animate()で落下アニメーション

animate()メゾッドを使った要素を上から下へ落下させるJavaScriptアニメーションの実装サンプルを紹介しています。

落下アニメーション

animate()メゾッドを利用した落下アニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。

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

HTMLには上から下へ移動させるアニメーションさせたい要素としてdivタグで「#item」を設置しています。

<div id="item"></div>

アニメーションさせるHTML要素「#item」には以下のCSSを指定しています。

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

animate()メゾッドで要素を上から下へ落下させる方法としてアニメーションタイムラインで「transform」プロパティの「translateY」を変更しています。

サンプルコードでは「iterations: Infinity」でアニメーションの無限ループを指定しています。

document.querySelector(`#item`).animate(
	[
		{ transform: 'translateY(-100px)' },
		{ transform: 'translateY(500px)' }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);

また、ターゲットの要素が「position」プロパティで「absolute」「fixed」他、絶対値での位置指定を可能にしている場合は「top」を調節した落下アニメーションも指定可能です。

document.querySelector(`#item`).animate(
	[
		{ top: '-100px' },
		{ top: '500px' }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);