JavaScript | animate()でスライドアニメーション
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
}
);