スクロール連動型アニメーション

wow.jsには、アニメーションの効果を制御するためのオプションがいくつか提供されています。基本的なオプションに加えて、追加の設定オプションもあります。以下に、主なオプションとその説明をまとめます。

主なオプション

• data-wow-duration: アニメーションの持続時間（例：2s）。
• data-wow-delay: アニメーションが開始するまでの遅延時間（例：1s）。
• data-wow-offset: アニメーションが開始する距離（ピクセル単位）。
• data-wow-iteration: アニメーションの繰り返し回数。

その他のオプション

以下のオプションをJavaScriptで設定することができます。

new WOW({
  boxClass: 'wow',         // クラス名を指定（デフォルトは'wow'）
  animateClass: 'animated', // アニメーションに使用するクラス名（デフォルトは'animated'）
  offset: 0,                // アニメーションが開始する位置（デフォルトは0）
  mobile: true,             // モバイルデバイスでもアニメーションを有効にするか（デフォルトはtrue）
  live: true,               // 動的に追加された要素にもアニメーションを適用するか（デフォルトはtrue）
  callback: function(box) {
    // アニメーションが始まる前に実行されるコールバック関数
    // boxはアニメーションが適用される要素
  },
  scrollContainer: null,    // スクロールコンテナを指定（デフォルトはwindow）
  resetAnimation: true      // アニメーションが終わった後にアニメーションをリセットするか（デフォルトはtrue）
}).init();

オプションの説明

• boxClass: アニメーションを適用する要素に追加するクラス名。
• animateClass: アニメーションを行うために要素に追加するクラス名。
• offset: アニメーションが開始される位置（ピクセル単位で指定）。
• mobile: モバイルデバイスでアニメーションを有効にするかどうかを指定。
• live: ページに動的に追加された要素にもアニメーションを適用するかどうかを指定。
• callback: アニメーションが始まる前に実行されるコールバック関数。アニメーションが適用される要素を引数にとる。
• scrollContainer: 特定のスクロールコンテナを指定。デフォルトはwindow。
• resetAnimation: アニメーションが終了した後にアニメーションをリセットするかどうかを指定。

使用例

以下は、wow.jsのオプションを設定する例です。

new WOW({
  boxClass: 'wow',         // クラス名を指定（デフォルトは'wow'）
  animateClass: 'animated', // アニメーションに使用するクラス名（デフォルトは'animated'）
  offset: 100,              // アニメーションが開始する位置（ピクセル単位）
  mobile: false,            // モバイルデバイスではアニメーションを無効にする
  live: true,               // 動的に追加された要素にもアニメーションを適用する
  callback: function(box) {
    console.log("Animation started on: ", box);
  },
  scrollContainer: null,    // スクロールコンテナを指定（デフォルトはwindow）
  resetAnimation: false     // アニメーションが終わった後にアニメーションをリセットしない
}).init();

この設定により、ページ内の要素に対してカスタマイズされたアニメーション効果を簡単に適用することができます。