Pada kesempatan kali ini saya akan membahas artikel tentang Cara Membuat Zoom Gambar Dengan Menggunakan AngularJs. Yang di maksud membuat zoo gambar pada artikel kali ini adalah membuat suatu animasi ketika saya melakukan mousemove atau pergerakan pada mouse di suatu objek maka di area dekat mouse akan saya zoom atau perbesar. Biasanya animasi ini sering kita jumpai di sebuah beberapa marketplace yang dibuat sebuah fiter untuk dapat melihat lebih dekat suatu produk.

Langkah pertama Cara Membuat Zoom Gambar Dengan Menggunakan AngularJs yaitu kita akan membuat html dan css seperti script di bawah ini.

Disini ada tiga div yang saya buat yaitu, div dengan nama class image saya buat untuk menampilkan gambar biasa dan didalamnya juga terdapat div class zoom dengan border sehingga seperti kotak untuk saya gerakan bersamaan dengan arah kursor dengan cara memberikan top dan left sesuai titik koordinatnya. Dan div ketiga adalah div dengan nama class imagezoom dimana berisi background gambar yang di atur posisi dari background dengan size background yang besar. Beberapa property css yang bersifat dinamis valuenya saya pisah dengan memberikan style css dengan cara inline atau di dalam tag div htmlnya langsung.

Dan langkah terakhir saya buat dua buah fungsi untuk mouse move ketika mouse bergerak atau pindah pada suatu objek dan mouse leave ketika mouse meninggalkan area objek tersebut.

Di dalam fungsi myFunc saya dapatkan terlebih dahulu titik koordinat dari kursornya. Dimana titik koordinat ini saya gunakan untuk div zoom agar selalu mengikuti kemana kursor pergi dengan cara memberikan style css position absolute dan top serta left sesuai titik koordinat .Dan untuk gambar yang di zoom saya buat 3 kali lipat, sehingga titik koordinat x dan y saya kalikan 3 dan kemudian saya gunakan nilainya untuk background position yang ada di dalam div imagezoom. Dan teman-teman jangan lupa ya untuk background sizenya saya juga atur 3kali lipat dari lebar gambar yang ada di dalam div class image. Dan untuk lebar dan tinggi dari div class imagezoom juga tiga kali lipat dari div class zoom.

Jika ditampilkan di halaman browser maka akan tampil seperti pada gambar di bawah ini.

Cara Membuat Zoom Gambar Dengan Menggunakan AngularJs

Demikian artikel tentang Cara Membuat Zoom Gambar Dengan Menggunakan AngularJs. Semoga bermanfaat dan selamat mencoba.