membuat efek lekukan 3d saat mouse berada pada gambar dengan html dan jquery
pernah kalian melihat web yang ada gambar nya dan jika gambar itu didekati oleh mouse maka gambar akan melakukan efek sesuatu misalnya gambar tertekuk speti gambar diatas
saya akan menjelaskan tenntang cara membuatnya cukup agan dwonload dulu bahan bahan nya ,
dwonload meteri disini
stelah anda download materinya ,sebenernya itu adalah bahanyang sudah jadi ,disini saya hanya akan menjelaskan tentang bagaimana cara ngeditnya
1. pertama anda extra dulu itu file
kalo udah kaya begitu coba buka aja nusakom-hover.html nya
jika kita dekatkan atau taruh cursor kita di gambar maka akan sperti dibawah:
keren buka bisa buat efek kaya gitu nah dsini saya akan membetitahu tentang caara mengedit ukuran ,tata letak gambar ,warna background ,dan gambar yang digunakan ,maupun tulisan tersebut pada style css nya ,namun pada js tetap biarkan default saja lho ya .
let's get started
1. yang pertama kita cari tahu tentang bagaimana mengubah gambarnya ,untuk anda yang udah belajar html pasti dah tahu , <img src > itulah kunci nya
buka nusakom-hover.html nya dengan notepad dan lihat pada line 24
pada line dua empat anda dapat menganti gambar yang berada dalam directori manapun dalam partisi anda
2. cara mengatur ukuran box pada gambar
ini adalah cara yang sulit ,karna kita harus tahu fungsi dari relasi class pada css nya ,karna saya sudah tahu maka akan saya jelaskan
dari gambar diatas saya menjelaskan pada line ke 2 dan tiga jika anda ganti maka akan berpengaruh pada tampilan panjang dan lebar dari box yang ada pada gambar tadi
3. cara memposiskan letak gambarnya
fokus pada line 71 pada class bagian main kan ada width dan heiht ,,silakan anda ganti saja dan coba coba sendiri siapa tau bisa
sekian silakan explorasi sendiri ya gan
Tidak ada komentar:
Posting Komentar