Cara Membuat Gradual Element Fader
Gradual Element Fader dapat membuat dan menampilkaan suatu element menjadi terlihat memudar atau samar -samar, tetapi jika mouse digulirkan diatasnya, secara lembut gambar akan terlihat dengan jelas sesuai bentuk dan tampilannya yang asli.
Contoh:
Cara Memasang Gradual Element Fader
Langkah Pertama:
Letakan Js berikut ini tepat diatas kode
<script type="text/javascript" src="gradualfader.js">
/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* Please keep this notice intact
***********************************************/
</script>
Langkah Kedua:
Gunakan syntax seperti contoh berikut ini untuk menerapkan efek pada elemen, berikan class='gradualfader' dan letakkan kedalam tag
<img src="test.gif" class="gradualfader" />
<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src="dd.gif" /></a>
<div style="width: 300px; border: 1px solid gray; background: blue" class="gradualfader">
Some text here
</div>
Kemudian tambahkan kode berikut ini untuk mengaktifkan efek, letakan pada bagian bawah halaman mengikuti semua elemen atau diatas
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
Keterangan:
Anda dapat menyempurnakan atau Customizing efek jika Anda menginginkannya di dalam file .js:GradualFader.baseopacity = 0.4 // atur opacity dasar saat mouse tidak melebihi elemen (desimal di bawah 1)
GradualFader.increment = 0,2 // jumlah opacity meningkat setelah setiap iterasi (saran: 0,1 atau 0,2)sumber: dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon