Membetulkan Animasi JavaScript Bergantung kepada Media untuk Tapak Web Responsif

Memahami Isu Animasi JavaScript Bersyarat

Selalunya perlu untuk memasukkan gelagat yang berbeza untuk jenis peranti atau saiz skrin yang berbeza apabila menggunakan reka bentuk web responsif. Ia boleh mencabar untuk menggunakan JavaScript dalam situasi ini untuk mengawal animasi berdasarkan pertanyaan media. Apabila dua animasi—satu untuk setiap peranti—tidak berfungsi serentak seperti yang dijangkakan, itu adalah isu biasa.

Dua animasi JavaScript digunakan dalam senario ini: satu untuk "skrol navigasi" (sesuai untuk skrin yang lebih besar) dan satu lagi untuk "skrol cta" (seruan tindak) yang bertujuan untuk peranti yang lebih kecil. Kesukarannya terletak pada memastikan bahawa setiap animasi dimainkan secara berasingan mengikut lebar skrin sambil mengelakkan perlanggaran.

Apabila dua animasi ditetapkan dalam teg skrip yang berbeza dan hanya satu daripadanya berfungsi dengan baik, masalah berlaku. Jika dilaksanakan secara cuai, menggabungkannya di bawah satu syarat atau menggabungkan teg skrip boleh mengakibatkan isu selanjutnya, terutamanya apabila menggunakan pertanyaan media seperti `window.matchMedia()`.

Siaran ini akan membincangkan cara menggunakan syarat media untuk mengatur JavaScript anda supaya setiap animasi berfungsi seperti yang dimaksudkan. Untuk menyediakan peralihan yang lancar antara skrin mudah alih dan skrin yang lebih besar, ia akan memberikan penekanan yang kuat pada kenyataan bersyarat dan pertanyaan media yang sesuai.

Perintah	Contoh penggunaan
window.matchMedia()	JavaScript menggunakan teknik ini untuk menggunakan pertanyaan media. Berdasarkan saiz skrin, ia menentukan sama ada dokumen memenuhi pertanyaan media CSS yang diberikan dan memulakan operasi JavaScript yang berkaitan. Skrip ini memudahkan untuk membezakan animasi untuk paparan yang lebih besar berbanding yang mudah alih.
addEventListener("change", callback)	Perintah ini memantau pengubahsuaian pada status pertanyaan media. Fungsi yang dibekalkan sebagai panggilan balik dilakukan apabila lebar skrin melebihi ambang yang telah ditetapkan (seperti 450 piksel). Ia membenarkan tindak balas dinamik tanpa memerlukan penyegaran halaman.
removeEventListener("scroll", callback)	Dengan menghapuskan pengendalian acara sia-sia pada saiz skrin yang salah, arahan ini mengoptimumkan kelajuan dengan mengalih keluar pendengar acara tatal apabila ia tidak diperlukan lagi. Apabila berselang seli antara pertanyaan media, adalah penting.
window.pageYOffset	Jumlah piksel yang telah ditatal ke atas dan ke bawah dalam dokumen dikembalikan oleh atribut ini. Ia digunakan untuk mengesan sama ada pengguna menatal ke atas atau ke bawah dan untuk menjejaki kedudukan tatal.
element.style.top	Perintah ini melaraskan sifat CSS teratas elemen, yang mengawal kedudukan menegak elemen pada halaman. Di sini, ia digunakan untuk menentukan di mana dalam skrol pengguna bar navigasi harus dipaparkan atau disembunyikan.
element.style.left	Perintah ini menggerakkan elemen secara mendatar dengan melaraskan sifat CSS kiri, sama seperti element.style.top lakukan. Pada peranti mudah alih, ia digunakan untuk meluncurkan butang seruan tindak ke dalam dan keluar dari paparan.
mediaQuery.matches	Sifat ini mengesahkan sama ada pertanyaan media dan dokumen itu kini sepadan. Untuk memastikan animasi yang sesuai digunakan pada peranti mudah alih berbanding desktop, adalah penting untuk menjalankan animasi yang sesuai secara bersyarat berdasarkan lebar skrin.
prevScrollpos >prevScrollpos > currentScrollPos	Untuk menentukan arah tatal (atas atau bawah), syarat ini menyemak lokasi tatal daripada lelaran sebelumnya dan semasa. Menentukan cara item harus bertindak balas terhadap penatalan—contohnya, dengan mendedahkan atau menyembunyikan butang atau bar navigasi—adalah penting.
onscroll	Pengendali acara bersepadu yang dicetuskan dengan menatal oleh pengguna. Dengan membandingkan kedudukan skrol sebelumnya dan semasa, ia melaksanakan animasi berasaskan skrol.

Menguruskan Animasi JavaScript Berdasarkan Saiz Skrin

Contoh awal skrip JavaScript telah dibuat untuk menangani masalah mempunyai dua animasi berbeza—satu untuk desktop dan satu untuk peranti mudah alih. Memastikan bahawa setiap animasi hanya bermula apabila ia diperlukan, bergantung pada lebar skrin peranti, adalah cabaran utama. The teknik digunakan untuk mencapai ini, membolehkan kod untuk mengenal pasti keadaan di mana syarat pertanyaan media tertentu dipenuhi. Skrip memastikan bahawa setiap animasi berfungsi secara berasingan berdasarkan saiz skrin dengan menggunakan keadaan berbeza untuk desktop (lebar min: 450px) dan mudah alih (lebar maksimum: 450px).

Tingkah laku tatal skrin yang lebih besar untuk bar navigasi dikendalikan dalam skrip pertama. Bergantung pada arah tatal, bar sama ada kekal kelihatan atau hilang apabila pengguna menatal ke atas atau ke bawah. Menggunakan dan pembolehubah, ini diuruskan dengan membandingkan kedudukan skrol sebelumnya dan semasa. Menatal ke atas menyebabkan bar navigasi muncul semula dengan menetapkan kedudukan teratasnya kepada 0, dan menatal ke bawah menyebabkannya hilang dengan mengalihkannya keluar dari pandangan dengan nilai teratas negatif.

Skrip kedua memperkatakan butang "seruan tindak" (CTA) pada peranti mudah alih. Semua saiz skrin memaparkan butang CTA, tetapi ia hanya bernyawa apabila lebar skrin kurang daripada 450 piksel. Apabila pengguna menatal ke atas, butang meluncur masuk dari sebelah kiri skrin; apabila mereka tatal ke bawah, butang itu hilang daripada pandangan. Dengan logik perbandingan kedudukan tatal yang sama seperti bar navigasi, tingkah laku ini boleh dibandingkan. Walau bagaimanapun, daripada mengubah nilai teratas, ia mengubah suai lokasi kiri butang, menyebabkan ia sama ada muncul atau hilang berdasarkan arah tatal.

Kedua-dua skrip dimaksudkan untuk berfungsi secara berasingan antara satu sama lain. Walau bagaimanapun, ia terkandung dalam ungkapan bersyarat yang mengesahkan lebar skrin untuk mengelakkan konflik. Dengan , pertanyaan media boleh digunakan secara langsung dalam JavaScript, membenarkan skrip beralih secara dinamik antara dua animasi tanpa mengganggu satu sama lain. Dengan mengekalkan animasi luar dalam lebar skrin yang ditetapkan, pendekatan modular ini meningkatkan kecekapan dan menjamin operasi yang lancar pada desktop dan peranti mudah alih.

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;
}

Mengoptimumkan JavaScript untuk Animasi Responsif

Komponen penting dalam membangunkan tapak web yang responsif ialah memastikan peralihan dan animasi bertindak balas secara berbeza pada peranti bersaiz berbeza. Pengurusan keadaan yang berkesan adalah penting apabila bekerja dengan pertanyaan media dan JavaScript, terutamanya apabila animasi bertujuan untuk dilancarkan hanya pada saiz skrin tertentu. Di sinilah pendengar acara dinamik dan mula bermain. Dengan bantuan alatan ini, pembangun boleh memastikan bahawa animasi hanya dilancarkan apabila kriteria tertentu dipenuhi, meningkatkan pengalaman dan prestasi pengguna pada platform desktop dan mudah alih.

Mengendalikan banyak animasi yang berjalan serentak memberikan satu lagi kesukaran untuk animasi JavaScript yang bergantung pada media. Membahagikan fungsi kepada pendengar acara modular yang lebih terurus boleh menghasilkan keajaiban dalam situasi ini. Adalah lebih cekap untuk memisahkan pelbagai fungsi dan mengaktifkannya berdasarkan pertanyaan media tertentu dan bukannya melaksanakan semua skrip sekaligus. Ini memastikan bahawa setiap skrip beroperasi seperti yang dimaksudkan pada peranti yang sesuai dan membantu menjimatkan beban penyemak imbas yang tidak perlu.

Pengoptimuman prestasi untuk peranti mudah alih amat penting apabila bekerja dengan animasi responsif. Oleh kerana peranti mudah alih selalunya mempunyai kuasa pemprosesan yang lebih rendah daripada desktop, prestasi pada peranti mudah alih boleh dipertingkatkan dengan mengurangkan kerumitan skrip. Contoh penggunaan ini pengendali acara dengan berkesan menjamin kelancaran animasi khusus mudah alih seperti "tatal cta" tanpa mengenakan cukai kepada sumber peranti. Tambahan pula, ia menjamin bahawa peranti yang lebih besar memuatkan animasi berkadar dengan saiz skrin sahaja.

1. Bagaimanakah cara saya menggunakan pertanyaan media dalam JavaScript?
2. JavaScript membenarkan anda menggunakan pertanyaan media dengan . Anda boleh menggunakan cara ini untuk menjalankan skrip berbeza berdasarkan lebar skrin.
3. Bagaimanakah saya mengawal animasi berdasarkan saiz skrin?
4. guna untuk menentukan lebar skrin untuk mengawal animasi. Kemudian, tambah atau alih keluar pendengar acara jika perlu. Ini menjamin bahawa, bergantung pada saiz skrin, hanya animasi yang berkaitan akan dimainkan.
5. Apakah cara terbaik untuk mengoptimumkan animasi skrol?
6. Dengan mengurangkan bilangan operasi yang dilakukan dalam acara tatal, boleh digunakan dengan lebih berkesan dalam pengoptimuman animasi skrol. Apabila skrol dikesan, barulah logik animasi yang diperlukan dilaksanakan.
7. Bagaimanakah saya mengendalikan berbilang animasi dalam JavaScript?
8. Berbilang animasi boleh diurus dengan membahagikannya kepada keadaan dan pendengar acara yang berbeza. Ini mengurangkan kemungkinan konflik kerana setiap animasi beroperasi secara berasingan.
9. Apa yang boleh dan lakukan dalam animasi skrol?
10. Pembolehubah ini memantau tempat pengguna menatal. Kedudukan skrol sebelumnya disimpan dalam , dan kedudukan skrol semasa disimpan dalam . Adalah mungkin untuk mengetahui sama ada pengguna menatal ke atas atau ke bawah dengan membandingkannya.

Kesimpulannya, penciptaan laman web responsif memerlukan pengurusan animasi JavaScript untuk pelbagai peranti. Pembangun boleh menyediakan pengalaman pengguna yang optimum dengan mencetuskan animasi tertentu berdasarkan lebar skrin melalui penggunaan alatan seperti .

Apabila dilaksanakan dengan betul, tapak web boleh meningkatkan tingkah laku dan prestasi visual mereka pada pelbagai peranti. Satu cara untuk melakukan ini ialah dengan menggunakan animasi skrol secara selektif dan mengasingkannya. Kaedah ini menjamin peralihan yang lancar antara animasi desktop dan mudah alih dan membantu mengelakkan pertembungan skrip.