membuat efek lekukan 3D pada gambar di html

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 

download 

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

Bagikan Artikel ini