javascript animateを使用して画像スクロールを作成する

作成日 2023.02.22
javascript
javascript

javascriptで、animateを使用して画像スクロールを作成するサンプルコードを記述してます。「animate」を使用して「style」に「backgroundPosition」を指定することで可能です。

1. 環境
2. 画像スクロール
3. 右方向
4. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 110.0.5481.104

Javascript サンプル集はこちら

画像スクロール

画像スクロールを行うには、
1.　「animate」で変化させるstyleに「backgroundPosition」で「-100%」を終了位置に指定
することで可能です。

<style>
.box {
  width: 500px;
  height: 150px;
  background-size: 50%;
  background: url('https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png') repeat-x;
}
</style>

<div class="box"></div>

<script>

document.getElementsByClassName('box')[0].animate(
  [
    { backgroundPosition: '0 0' },
    { backgroundPosition: '-100% 0' }
  ],
  {
    duration: 3000,
    iterations: Infinity
  }
);

</script>

実行結果

「animate」のプロパティに設定できる値は、以下となります。

プロパティ名	内容	値
duration	再生時間（ミリ秒）	ミリ秒を指定
delay	再生までの待機時間（ミリ秒）	ミリ秒を指定(デフォルトは0)
direction	再生方向	“normal” 0%から100%へ(デフォルト) “reverse” 100%から0%へ “alternate” 0%から100%→100%から0%で再生 “alternate-reverse” alternateの逆方向
easing	アニメーション変化方法	“linear” 一定の速度で変化(デフォルト) “ease” 開始時と終了時は緩やかに変化 “ease-in” 最初はゆっくり、だんだん速く “ease-in-out” 最初は速く、だんだんゆっくり “ease-out” 開始時と終了時はかなり緩やか “step-start”最初に100%の状態に変化 “steps( 引数1 , 引数2 )” 数値により段階的 “step-end” 0%の状態から、最後に100% “cubic-bezier( 引数1 , 引数2 , 引数3 , 引数4)” ベジエ曲線の座標で変化
endDelay	再生終了後の待機時間	ミリ秒(規定値は0)
fill	アニメーション前後の状態	“none” cssのみ(デフォルト) “forwards” 終了状態を維持 “backwards” 開始時の状態を適用 “both” forwardsとbackwardsの両方
iterationStart	再生開始タイミング「0.5」だと 50% の位置から始まり1周	0以上の小数(デフォルトは0)
iterations	再生回数	0以上の小数(デフォルトは1) 無限ループは「Infinity」
id	識別ID	文字列で指定
composite	アニメーションの状態と処理	“replace” 現在の状態で置き換え(デフォルト) “add” 状態にアニメーションの状態を追加 “accumulate” 状態にアニメーションの状態を累積
iterationComposite	繰り返し時の状態	“replace” 現在の状態で置き換え “accumulate” これまでの状態を累積

右方向

右方向にスクロールするには、「100%」に指定します。

<script>

document.getElementsByClassName('box')[0].animate(
  [
    { backgroundPosition: '0 0' },
    { backgroundPosition: '100% 0' }
  ],
  {
    duration: 3000,
    iterations: Infinity
  }
);

</script>

実行結果

サンプルコード

以下は、
「実行」ボタンをクリックすると、画像がスクロールを開始する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
  .box {
    width: 500px;
    height: 150px;
    background-size: 50%;
    background: url('https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png') repeat-x;
  }
</style>
<body>
  <div class="container text-center w-25" style="margin-top:150px">

    <div class="box"></div>

    <button id="btn" type="button" class="btn btn-raised btn-info">
      実行
    </button>

  </div>

  <script>
    // クリックイベントを登録
    btn.onclick = () => {

      document.getElementsByClassName('box')[0].animate(
        // 変化させるスタイル
        [
          { backgroundPosition: '0 0' },
          { backgroundPosition: '-100% 0' }
        ],
        {
          duration: 3000,
          iterations: Infinity
        }
      );

    };
  </script>
</body>

</html>

スクロールされていることが確認できます。