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
}
);