JavaScript で CSS アニメーションをトリガーする

jQuery がない場合、JavaScript を使用して CSS アニメーションをトリガーすることは実行可能なオプションです。このガイドでは、ユーザーがページをスクロールするときにこれを実現するための簡潔な方法を説明します。

クラス操作による CSS アニメーションのトリガー

CSS アニメーションをトリガーする最も簡単な方法は、以下を変更することです。クラスの存在により、その中で定義されたスタイルが有効になります。純粋な JavaScript でこれを実現するには:

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

ログイン後にコピー

提供された例では、アニメーションの CSS クラス「anim」と「anim2」がすでに定義されています。これらのクラスをそれぞれの要素に追加することで、アニメーションを開始できます。

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

ログイン後にコピー

ページスクロールでアニメーションをトリガー

最後に、ページがスクロールされたときにアニメーションを開始します。スクロールすると、「window.addEventListener」関数を利用できます:

window.addEventListener('scroll', start);

ログイン後にコピー

これにより、ページがスクロールされるたびに「start」関数を呼び出して、CSS アニメーションをトリガーします。

補足

キーフレームを使用して CSS で定義されたアニメーションは、追加または追加することで同様にトリガーできます。クラスを削除します。ただし、アニメーションを有効にするために、対象の要素に定義済みの遷移プロパティがあることを確認することが重要です。

以上がスクロール時に JavaScript を使用して CSS アニメーションをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。