JavaScript | animate()でスライドアニメーション

2022-03-09

animate()メゾットを使ったスライド(横移動)のJavaScriptアニメーションの実装サンプルを紹介しています。

スライドアニメーション

animate()メゾットを利用したスライド(横移動)アニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。

See the Pen JavaScript | Infinite and alternate with animate by yochans (@yochans) on CodePen.

HTMLにはスライドさせたい要素としてdivタグで「#item」を設置しています。

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

スライドさせるHRML要素「#item」には以下のCSSを指定しています。

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

サンプルコードでは「iterations: Infinity」を指定して無制限に横移動アニメーションを繰り返しています。

折り返してアニメーションを反復させる場合はオプションに「direction: 'alternate’」を指定します。
関連:JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES

translateX()を使ったスライドアニメーション

animate()メゾットのキーフレームに「transform」「translateX()」を指定して横移動を実装しています。

指定する値はクオーテーションで括る必要があります。

document.querySelector(`#item`).animate(
	[
		{ transform: 'translateX(0)' },
		{ transform: 'translateX(300px)' }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);

positionを使ったスライドアニメーション

別途、要素に対してpositionプロパティで「absolute」「fixed」他、絶対値での位置指定している場合は、「top」「left」を使った移動アニメーションを指定する事が可能です。

指定する値はクオーテーションで括る必要があります。

document.querySelector(`#item`).animate(
	[
		{ left: '0' },
		{ left: '200px' }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);

marginLeftを使ったスライドアニメーション

キーフレームに「marginLeft」を指定する事で横移動を実装する事も可能です。

CSSコードで使う「margin-left」ではなく「marginLeft」と記述します。
Lを小文字にした場合は機能しません。

document.querySelector(`#item`).animate(
	[
		{ marginLeft: '0' },
		{ marginLeft: '200px' }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);