Memperbaiki Animasi JavaScript yang Bergantung pada Media untuk Situs Web Responsif

Memahami Masalah Animasi JavaScript Bersyarat

Seringkali diperlukan untuk menggabungkan perilaku yang berbeda untuk jenis perangkat atau ukuran layar yang berbeda saat menggunakan desain web responsif. Menggunakan JavaScript dalam situasi ini untuk mengontrol animasi berdasarkan kueri media dapat menjadi tantangan. Ketika dua animasi—satu untuk setiap perangkat—tidak berfungsi secara bersamaan seperti yang diharapkan, itu adalah masalah umum.

Dua animasi JavaScript digunakan dalam skenario ini: satu untuk "scroll navigasi" (cocok untuk layar yang lebih besar) dan satu lagi untuk "cta scroll" (ajakan bertindak) yang ditujukan untuk perangkat yang lebih kecil. Kesulitannya terletak pada memastikan bahwa setiap animasi diputar secara terpisah sesuai dengan lebar layar sambil menghindari tabrakan.

Ketika dua animasi diatur dalam tag skrip yang berbeda dan hanya satu yang berfungsi dengan baik, terjadi masalah. Jika diterapkan secara sembarangan, menggabungkannya dalam satu kondisi atau menggabungkan tag skrip dapat mengakibatkan masalah lebih lanjut, terutama saat menggunakan kueri media seperti `window.matchMedia()`.

Postingan ini akan membahas cara menggunakan kondisi media untuk mengatur JavaScript Anda sehingga setiap animasi berfungsi sebagaimana mestinya. Untuk memberikan transisi yang mulus antara perangkat seluler dan layar yang lebih besar, hal ini akan memberikan penekanan kuat pada pernyataan kondisional dan pertanyaan media yang sesuai.

Memerintah	Contoh penggunaan
window.matchMedia()	JavaScript menggunakan teknik ini untuk menerapkan kueri media. Berdasarkan ukuran layar, ini menentukan apakah dokumen memenuhi kueri media CSS yang diberikan dan memulai operasi JavaScript yang relevan. Skrip ini memudahkan untuk membedakan animasi untuk tampilan yang lebih besar versus animasi seluler.
addEventListener("change", callback)	Perintah ini memantau perubahan pada status kueri media. Fungsi yang disediakan sebagai panggilan balik dilakukan ketika lebar layar melebihi ambang batas yang telah ditentukan (misalnya 450 piksel). Ini memungkinkan respons dinamis tanpa memerlukan penyegaran halaman.
removeEventListener("scroll", callback)	Dengan menghilangkan penanganan peristiwa yang tidak ada gunanya pada ukuran layar yang salah, perintah ini mengoptimalkan kecepatan dengan menghapus pendengar peristiwa gulir ketika tidak lagi diperlukan. Saat berganti-ganti pertanyaan media, ini penting.
window.pageYOffset	Jumlah piksel yang telah digulir ke atas dan ke bawah dalam dokumen dikembalikan oleh atribut ini. Ini digunakan untuk mendeteksi apakah pengguna menggulir ke atas atau ke bawah dan untuk melacak posisi gulir.
element.style.top	Perintah ini menyesuaikan properti CSS teratas elemen, yang mengontrol posisi vertikal elemen pada halaman. Di sini, ini digunakan untuk menentukan di mana dalam gulir pengguna, bilah navigasi harus ditampilkan atau disembunyikan.
element.style.left	Perintah ini memindahkan elemen secara horizontal dengan menyesuaikan properti CSS kiri, seperti yang dilakukan element.style.top. Di perangkat seluler, ini digunakan untuk menggeser tombol ajakan bertindak ke dalam dan ke luar tampilan.
mediaQuery.matches	Properti ini memverifikasi apakah kueri media dan dokumen sekarang cocok. Untuk memastikan animasi yang sesuai diterapkan pada perangkat seluler dan bukan pada desktop, penting untuk menjalankan animasi yang sesuai secara kondisional berdasarkan lebar layar.
prevScrollpos >prevScrollpos > currentScrollPos	Untuk menentukan arah gulir (atas atau bawah), kondisi ini memeriksa lokasi gulir dari iterasi sebelumnya dan saat ini. Menentukan bagaimana item harus bereaksi terhadap pengguliran—misalnya, dengan menampilkan atau menyembunyikan tombol atau bilah navigasi—adalah hal yang sangat penting.
onscroll	Pengendali peristiwa terintegrasi yang dipicu oleh pengguliran oleh pengguna. Dengan membandingkan posisi gulir sebelumnya dan saat ini, ia melakukan animasi berbasis gulir.

Mengelola Animasi JavaScript Berdasarkan Ukuran Layar

Contoh skrip JavaScript sebelumnya dibuat untuk mengatasi masalah memiliki dua animasi berbeda—satu untuk desktop dan satu lagi untuk perangkat seluler. Memastikan setiap animasi hanya dimulai saat diperlukan, bergantung pada lebar layar perangkat, merupakan tantangan utama. Itu Teknik digunakan untuk mencapai hal ini, memungkinkan kode untuk mengidentifikasi kejadian di mana kondisi kueri media tertentu terpenuhi. Skrip memastikan bahwa setiap animasi berfungsi secara terpisah berdasarkan ukuran layar dengan menggunakan kondisi berbeda untuk desktop (lebar minimum: 450 piksel) dan seluler (lebar maksimum: 450 piksel).

Perilaku gulir layar yang lebih besar untuk bilah navigasi ditangani di skrip pertama. Tergantung pada arah gulungannya, bilah tetap terlihat atau menghilang saat pengguna menggulir ke atas atau ke bawah. Menggunakan Dan variabel, ini dikelola dengan membandingkan posisi gulir sebelumnya dan saat ini. Menggulir ke atas menyebabkan bilah navigasi muncul kembali dengan mengatur posisi teratasnya ke 0, dan menggulir ke bawah menyebabkan bilah navigasi menghilang dengan menggesernya keluar dari tampilan dengan nilai teratas negatif.

Skrip kedua berkaitan dengan tombol "ajakan bertindak" (CTA) pada perangkat seluler. Semua ukuran layar menampilkan tombol CTA, namun hanya bernyawa ketika lebar layar kurang dari 450 piksel. Saat pengguna menggulir ke atas, tombol akan meluncur dari sisi kiri layar; ketika mereka menggulir ke bawah, tombol tersebut menghilang dari pandangan. Dengan logika perbandingan posisi gulir yang sama dengan bilah navigasi, perilaku ini dapat dibandingkan. Namun, alih-alih mengubah nilai teratas, ini mengubah lokasi kiri tombol, menyebabkannya muncul atau hilang berdasarkan arah gulir.

Kedua skrip dimaksudkan untuk bekerja secara terpisah satu sama lain. Namun, mereka dikemas dalam ekspresi kondisional yang memverifikasi lebar layar untuk mencegah konflik. Dengan , kueri media dapat digunakan secara langsung dalam JavaScript, sehingga skrip dapat bertransisi secara dinamis antara dua animasi tanpa mengganggu satu sama lain. Dengan menjaga animasi asing tetap sesuai lebar layar yang ditentukan, pendekatan modular ini meningkatkan efisiensi dan menjamin pengoperasian yang lancar di desktop dan perangkat seluler.

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

Mengoptimalkan JavaScript untuk Animasi Responsif

Komponen penting dalam mengembangkan situs web yang responsif adalah memastikan transisi dan animasi merespons secara berbeda pada perangkat dengan ukuran berbeda. Manajemen kondisi yang efektif sangat penting ketika bekerja dengan kueri media dan JavaScript, terutama ketika animasi dimaksudkan untuk diluncurkan hanya pada ukuran layar tertentu. Di sinilah pendengar acara dinamis dan ikut bermain. Dengan bantuan alat ini, pengembang dapat memastikan bahwa animasi hanya diluncurkan ketika kriteria tertentu dipenuhi, sehingga meningkatkan pengalaman dan kinerja pengguna pada platform desktop dan seluler.

Menangani banyak animasi yang berjalan sekaligus menghadirkan kesulitan lain untuk animasi JavaScript yang bergantung pada media. Membagi fungsionalitas menjadi pendengar peristiwa modular yang lebih mudah dikelola dapat menghasilkan keajaiban dalam situasi ini. Akan lebih efisien untuk memisahkan berbagai fungsi dan mengaktifkannya berdasarkan permintaan media tertentu daripada menjalankan semua skrip sekaligus. Hal ini memastikan bahwa setiap skrip beroperasi sebagaimana mestinya pada perangkat yang sesuai dan membantu menghemat beban browser yang tidak perlu.

Pengoptimalan kinerja untuk perangkat seluler sangat penting ketika bekerja dengan animasi responsif. Karena perangkat seluler sering kali memiliki kekuatan pemrosesan yang lebih rendah dibandingkan desktop, kinerja pada perangkat seluler dapat ditingkatkan dengan mengurangi kompleksitas skrip. Contoh penggunaan ini pengendali peristiwa secara efektif menjamin kelancaran pengoperasian animasi khusus seluler seperti "cta scroll" tanpa membebani sumber daya perangkat. Selain itu, ini menjamin bahwa perangkat yang lebih besar hanya memuat animasi yang proporsional dengan ukuran layar.

1. Bagaimana cara menggunakan kueri media di JavaScript?
2. JavaScript memungkinkan Anda menerapkan kueri media dengan . Anda dapat menggunakan cara ini untuk menjalankan skrip yang berbeda berdasarkan lebar layar.
3. Bagaimana cara mengontrol animasi berdasarkan ukuran layar?
4. Menggunakan untuk menentukan lebar layar untuk mengontrol animasi. Lalu, tambahkan atau hapus pemroses acara seperlunya. Hal ini menjamin bahwa, tergantung pada ukuran layar, hanya animasi relevan yang akan diputar.
5. Apa cara terbaik untuk mengoptimalkan animasi gulir?
6. Dengan mengurangi jumlah operasi yang dilakukan di dalam acara gulir, dapat digunakan lebih efektif dalam optimasi animasi gulir. Ketika gulir terdeteksi, barulah logika animasi yang diperlukan dijalankan.
7. Bagaimana cara menangani banyak animasi dalam JavaScript?
8. Beberapa animasi dapat dikelola dengan membaginya ke dalam kondisi dan pendengar peristiwa yang berbeda. Hal ini menurunkan kemungkinan konflik karena setiap animasi beroperasi secara terpisah.
9. Apa artinya? Dan lakukan dalam animasi gulir?
10. Variabel-variabel ini memantau di mana pengguna menggulir. Posisi gulir sebelumnya disimpan di , dan posisi gulir saat ini disimpan . Dimungkinkan untuk mengetahui apakah pengguna menggulir ke atas atau ke bawah dengan membandingkannya.

Kesimpulannya, pembuatan website responsif memerlukan pengelolaan animasi JavaScript untuk berbagai perangkat. Pengembang dapat memberikan pengalaman pengguna yang optimal dengan memicu animasi tertentu berdasarkan lebar layar melalui penggunaan alat seperti .

Jika diterapkan dengan benar, situs web dapat meningkatkan perilaku visual dan kinerjanya di berbagai perangkat. Salah satu cara untuk melakukannya adalah dengan menerapkan animasi gulir secara selektif dan mengisolasinya. Metode ini menjamin transisi yang mulus antara animasi desktop dan seluler serta membantu mencegah bentrokan skrip.