レスポンシブ Web サイトのメディア依存の JavaScript アニメーションの修正

JavaScript を使用したメディア クエリに基づく条件付きアニメーションの処理

このソリューションは、JavaScript と window.matchMedia 関数。

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

異なる画面サイズに個別のイベント リスナーを使用するモジュール式アプローチ

このバージョンは、メディア クエリごとに異なるスクロール イベント リスナーを使用するため、より効率的でモジュール化されています。

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

メディア クエリ用の統合スクロール ハンドラーへの条件付きロジックの適用

このメソッドは、メディア クエリに応じて条件チェックを行う単一のスクロール イベント リスナーを使用して、両方のアニメーションを処理します。

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollHandler(); };

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

JavaScript アニメーションとメディア クエリに関するよくある質問

1. JavaScript でメディア クエリを使用するにはどうすればよいですか?
2. JavaScript を使用すると、メディア クエリを適用できます。 window.matchMedia()。この方法を使用すると、画面の幅に基づいて異なるスクリプトを実行できます。
3. 画面サイズに基づいてアニメーションを制御するにはどうすればよいですか?
4. 使用 window.matchMedia() アニメーションを制御するために画面の幅を決定します。次に、必要に応じてイベント リスナーを追加または削除します。これにより、画面サイズに応じて、関連するアニメーションのみが再生されることが保証されます。
5. スクロールアニメーションを最適化する最善の方法は何ですか?
6. スクロールイベント内で実行される操作の数を減らすことで、 window.onscroll スクロール アニメーションの最適化でより効果的に使用できます。スクロールが検出されると、必要なアニメーション ロジックが実行されます。
7. JavaScript で複数のアニメーションを処理するにはどうすればよいですか?
8. 複数のアニメーションをさまざまな条件とイベント リスナーに分割して管理できます。これにより、各アニメーションが個別に動作するため、競合の可能性が低くなります。
9. どういうことですか prevScrollpos そして currentScrollPos スクロールアニメーションでやりますか？
10. これらの変数は、ユーザーがスクロールしている場所を監視します。前回のスクロール位置が保存されます。 prevScrollpos、現在のスクロール位置はに格納されます。 currentScrollPos。それらを比較することで、ユーザーが上にスクロールしているか下にスクロールしているかを知ることができます。

メディアクエリベースのアニメーションに関する最終的な考え

結論として、レスポンシブな Web サイトを作成するには、さまざまなデバイスの JavaScript アニメーションを管理する必要があります。開発者は、次のようなツールを使用して、画面幅に基づいて特定のアニメーションをトリガーすることで、最適なユーザー エクスペリエンスを提供できます。 window.matchMedia()。

正しく実装すると、Web サイトはさまざまなデバイス上での視覚的な動作とパフォーマンスを向上させることができます。これを行う 1 つの方法は、スクロール アニメーションを選択的に適用し、それらを分離することです。この方法により、デスクトップ アニメーションとモバイル アニメーション間のシームレスな移行が保証され、スクリプトの衝突を防ぐことができます。