ImagesLesson 95Preview gratis
Image Magnifier Glass
Lesson ini bagian dari How To · Semua level
Ringkasan
Image magnifier glass adalah efek kaca pembesar yang memperbesar bagian gambar saat kursor digerakkan di atasnya. Efek ini dibuat dengan menumpuk sebuah lensa di atas gambar, lalu menampilkan ulang gambar yang sama sebagai background lensa dengan skala lebih besar. Posisi background dihitung dari koordinat kursor sehingga bagian yang tampak selalu sesuai dengan titik yang sedang ditunjuk.
Poin kunci
- Wadah gambar diberi position: relative agar lensa dapat diposisikan secara absolut terhadap gambar.
- Lensa memakai gambar yang sama sebagai background dengan background-size beberapa kali ukuran aslinya.
- Event mousemove menghitung koordinat kursor relatif terhadap tepi gambar.
- Posisi background digeser sebesar koordinat dikali faktor zoom, lalu dikurangi setengah ukuran lensa.
- Sembunyikan lensa saat kursor keluar dari gambar agar efek tidak tertinggal di tempat lama.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.