JavaScript | animate()で背景画像の無限スクロールアニメーション
JavaScriptのanimate()メゾッドを使った使って背景画像を無限スクロールさせるアニメーションの実装サンプルを紹介しています。
アニメーション
animate()メゾッドを利用して背景画像の無限スクロールさせるシンプルな動作サンプルとJavaScriptのサンプルコードです。
See the Pen JavaScript | Move diagonally animation with animate by yochans (@yochans) on CodePen.
HTMLには無限スクロールさせたい背景画像のある要素としてdivタグで「.container」を設置しています。
<div class="container"></div>「.container」には以下のCSSを指定しています。
「background」プロパティにて背景画像のURLを指定しています。
「repeat-x」を指定することで背景画像は見えない部分がアニメーションによって表示された際に横に並んでいる状態となります。
.container {
width: 100%;
height: 32.6vw;
background: url('https://raw.githubusercontent.com/Yousuke777/bg/main/sample-bg.png') repeat-x;
background-size: 50%;
}背景画像を移動させるのにCSSでの「background-position」プロパティを変更していますが、JavaScriptのanimate()メゾッドの場合は「backgroundPosition」と記述して指定します。
左に向かって移動させるには「-100%」をアニメーション完了位置として指定しています。
オプションに「iterations: Infinity」を指定して無限ループするようにしています。
関連：JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES
document.querySelector(`.container`).animate(
[
{ backgroundPosition: '0 0' },
{ backgroundPosition: '-100% 0' }
],
{
duration: 5000,
iterations: Infinity
}
);CSSアニメーションバージョンも以下のページにて紹介しています。
関連：無限スクロールする背景のCSSアニメーションサンプル | ONE NOTES