Animasi Transparent Navbar

Animasi Transparent Navbar

Posted by rike on 0

Sumber : (blogspot) Animasi jQuery untuk Navbar by Ardianzzz

Yang perlu dijadikan catatan pada trik ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, mengganti dengan jenis navbar lain, bahkan menghilangkan secara permanen navbar tersebut.

Nah, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin trik blogger ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. Trik ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse.  Adapaun jQuery-nya dapat disimak seperti di bawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){

$(this).fadeTo("slow", 0.1);
});
});
</script>

Silakan Copas jQuery di atas di atas tag </head>.

Catatan :

Ganti kode yang berwarna merah (0.1 = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai 0.0 :)

Ganti kode yang berwarna hijau (1.0) menjadi 0.75 jika ingin transparasi navbar saat didekati mouse bernilai 25%. Sedangkan jika tetap pada nilai 1.0, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.
Selamat mencoba...