Cara Membuat Efek Fade In pada Gambar

Posted by Tips Trick Blogger Wednesday, February 23, 2011 0 comments

Sekarang kita membuat efek fade in pada gambar. Efek ini mungkin sama dengan beberapa efek blur pada gambar, namun efeknya di buat fade in secara perlahan. Lebih jelasnya silahkan lihat demonya di bawah ini.

Contoh efek fade in pada gambar

Contoh Membuat kolom tulisan dengan efek fade in

welcome to blogonol. Sekarang kita membuat efek fade in pada gambar. Efek ini mungkin sama dengan beberapa efek blur pada gambar, namun efeknya di buat fade in secara perlahan

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Tempatkan Kode berikut di atas kode </head>

<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/gradualfader.js"></script>

Masukkan kode berikut di atas kode </body>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>

Simpan Template

Selanjutnya kalau anda ingin memberikan efek fade in pada gambar silahkan masukkan kode berikut pada gambar anda.

Kode untuk membuat kolom tulisan dengan efek fade in

<div style="width: 300px; /* lebar kolom tampilan */ border: 1px solid gray; /* warna border */ background: grey" /* warna bacground */ class="gradualfader">
Masukkan tulisan anda di sini
</div>

Kalau anda ingin posisi gambar di tengah tinggal masukkan kode merah di bawah ini