Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Efek Hover Gambar Artistik dengan JQuery

tutorial efek fog, hover gambar jquery

Apa yang dimaksud dengan efek hover gambar artistik? Coba letakkan pointer mousemu pada gambar di halaman ini »
Untuk membuat efek seperti itu, yang kita butuhkan hanya JQuery. Saya ajarkan caranya di sini:
  • Pertama-tama, salinlah script di bawah ini, kemudian letakkan di atas kode </head>:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

    Nah, yang barusan kita lakukan adalah meletakkan mesinnya. Khusus untuk script di atas, jika ternyata templatemu sudah memilikinya, kamu tidak perlu lagi menambahkannya, satu template cukup satu mesin saja. Namun seperti halnya di alam nyata, sebuah mesin tidak akan bekerja tanpa adanya remot pengendali. Untuk itu, sertakanlah komponen pengendali ini dan letakkan tepat di bawah kode tadi:

    <script type='text/javascript'>
    $(document).ready(function() {
        $('img').hover(function() { //masuk
            $(this).animate({ opacity: "0.3" }, 1000);
        }, function() { //keluar
            $(this).animate({ opacity: "1" }, 1000);
        });
    });
    </script>

    Selesai. Klik Simpan Template kemudian lihat hasilnya. Sekarang kita masuk ke tahap pemahaman lebih lanjut.


Pemahaman Lebih Lanjut

  • Sebuah remot pengendali (sebut saja begitu) dapat memiliki tiga buah tugas penting, yaitu menentukan APA yang diberi efek, SEPERTI APA efek yang diberikan dan SECEPAT APA efek itu bekerja.
  • Perhatikan kode img yang nyungsep di antara kode '. Itu adalah selektor dalam CSS yang berarti GAMBAR. Oleh karena itu, tutorial ini sebenarnya tidak mutlak hanya memberlakukan efek pada gambar saja. Kamu juga bisa mengganti kode img tersebut menjadi a misalnya, untuk memberikan efek transparasi pada semua link (tautan). - [APA]
  • opacity adalah properti dalam CSS yang akan dianimasikan oleh mesin ini. - [SEPERTI APA]
  • 1000 adalah tingkat kecepatan perubahan nilai efek (dalam hal ini adalah: opacity/transparasi). Coba saja ganti nilai itu dan lihat perbedaan kecepatannya. - [SECEPAT APA]

Pemakaian JQuery dalam blog tentu saja memiliki sebuah resiko, yaitu blog menjadi bertambah lambat ketika diakses. Namun itu cuma sedikit saja. Atau jika kamu ingin membuat efek hover yang lebih ringan, kamu bisa baca tutorialnya di sini.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 3 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!