Advertisement
  1. Web Design
  2. HTML
Webdesign

Cara Membuat Thumbnail Multi-Pratinjau Dengan JavaScript Mouse Events

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam tutorial ini, kita akan bersenang-senang dengan JavaScript Mouse Event dengan membuat sesuatu yang bermanfaat dan menarik: thumbnail yang, ketika melayang di atas, menampilkan pilihan berbagai ebooks.

Berikut demo yang akan kita buat (gerakkan mouse ke sekeliling setiap thumbnail):

Setiap thumbnail menampilkan ebooks yang tersembunyi di bawahnya, tergantung pada posisi kursor. Ini adalah cara ideal untuk memberikan pratinjau singkat tentang apa yang tersedia (dalam hal ini di Envato Tuts+ ebook librari).

Saat kami membuat ini, kami akan menggunakan CSS Grid Layout dan event mousemove JavaScript, di antara hal-hal lainnya.

1. Markup HTML

Markup yang akan kita gunakan cukup mudah; list tanpa urutan polos dengan beberapa gambar berukuran sama di dalam setiap item list (card).

2. CSS

Sekarang, berkaitan dengan CSS style, dua hal penting:

  • Kita mendefinisikan list tidak berurutan sebagai grid container dan memberikan list item width: 25%. Alih-alih CSS grid, Anda bisa menggunakan flexbox atau metode tata letak pilihan Anda.
  • Kita secara visual menyembunyikan dan benar-benar memposisikan semua gambar di dalam list item, selain yang pertama.

Aturan CSS yang terapkan terapkan pada demo kita ditunjukkan di bawah ini:

Dengan beberapa gaya pengaturan ulang lainnya (menghapus bullet dari unordered list, memberi warna latar belakang pada body, dll.) Kita berakhir dengan ini:

3. JavaScript

Mari tambahkan dua baris berikut sehingga ketika semua aset halaman siap, fungsi init dijalankan. Kita juga akan men-trigger setiap kali jendela browser diubah ukurannya.

Di dalam fungsi ini, sejumlah hal terjadi; pertama kita mengulang melalui kartu.

Lingkari Gambar Anak

Selanjutnya, untuk setiap kartu, kita mengambil jumlah gambar anak tanpa memperhitungkan gambar pertama.

Catatan: gambar pertama terlihat secara default dan tidak diposisikan secara mutlak.

Jika setidaknya ada satu gambar anak, kita melakukan hal-hal berikut:

  • Hitung lebar kartu (lebar gambar pertama) dan ...
  • ... membagi kartu menjadi bagian yang sama dengan membagi lebarnya dengan jumlah gambar anak.

Untuk lebih memahami hal ini, mari kita asumsikan bahwa kartu pertama kita memiliki lebar 235 piksel. Kartu ini berisi empat gambar (ingat kita mengabaikan gambar pertama), jadi pembagian 235px/4 akan memberi kita 58.75px. Jadi apa peran nomor ini? Yah, itu menciptakan rentang kita, sehingga pada kartu hover, kita melacak posisi X mouse, periksa jangkauannya, dan akhirnya menampilkan gambar yang sesuai.

Untuk contoh sederhana kita, berikut adalah rentang yang dihasilkan:

Posisi X Mouse
Gambar untuk Ditampilkan
0<X≤58.75px
1st
58.75px≤X≤117.5px
2nd
117.5px<X≤176.25px
3rd
176.25px<X≤235px 4th

Harap dicatat kolom "Image to Show" menunjukkan gambar yang akan muncul dari kumpulan gambar empat anak (sekali lagi kita mengecualikan gambar yang terlihat pertama).

Sekarang setelah kita mengetahui persyaratannya, mari kita terjemahkan ke dalam kode. Masih di dalam lingkaran kita mendengarkan untuk event mousemove.

Ketika event ini terjadi, kita melakukan tindakan berikut:

  1. Dapatkan koordinat X dari pointer mouse relatif terhadap kartu "hovered" dan tidak relatif terhadap jendela browser.
  2. Hapus is-visible class dari semua gambar kartu.
  3. Tampilkan gambar yang sesuai tergantung pada posisi mouse (lihat tabel sebelumnya untuk contoh).

Bagian kode yang mengimplementasikan perilaku yang disebutkan di atas adalah sebagai berikut:

Seperti yang Anda lihat, ada dua fungsi khusus. Pertama, fungsi removeIsVisibleClass yang bertanggung jawab untuk menghapus is-visible class dari gambar yang bersangkutan. Kedua, fungsi addClass yang lebih umum yang bertanggung jawab untuk menambahkan is-visible class ke gambar target.

Inilah signature mereka:

Sejauh ini, kita telah melihat apa yang terjadi setiap kali kita mengarahkan kursor ke kartu. Mari sekarang bahas skenario sebaliknya. Dengan kata lain, apa yang seharusnya terjadi jika kita berhenti hovering di atas kartu. Dalam hal ini gambar awal pertama harus ditampilkan:

4. Dukungan Browser

Demo kita seharusnya berfungsi dengan baik di sebagian besar browser desktop. Beberapa catatan meskipun:

  • Demo menggunakan CSS Grid dan foreach loop yang tidak didukung oleh semua browser. Ada solusi alternatif untuk kedua kasus jika Anda lebih suka menggunakan fallback.
  • Demo berfungsi dengan cara yang sama di semua layar/perangkat dan tidak dioptimalkan untuk layar kecil/perangkat sentuh. Untuk demo sederhana kita, itu bagus, tetapi dalam proyek nyata Anda mungkin ingin membatasi penerapan ini hanya untuk layar yang lebih besar (atau perangkat non-sentuh).

Akhirnya, seperti biasa, kita menggunakan Babel untuk mengkompilasi kode ES6 ke ES5.

Kesimpulan

Dalam tutorial ini, kita berhasil membuat efek hover yang menarik dengan memanfaatkan event mouse JavaScript. Semoga Anda cukup terilhami untuk membangun sesuatu yang menakjubkan.

Untuk lebih jauh, saya mendorong Anda untuk membangun fungsi yang dapat digunakan kembali yang akan menangani kode berulang di dalam statement switch. Berikan komentar jika Anda menerima tantangan!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.