Auto Hide Widget With Scroll Animation

Auto Hide Widget With Scroll Animation adalah sebuah animasi yan akan kita berikan pada sebuah widget dalam hal ini saya contohkan pada widget G+ Follower yang effect nya akan nampak jika kita melakukan scrool pada bagian sidebar maka pada ketinggian tertentu widget G+ Follower yang awalnya tidak tampak (hide) akan bisa terlihat(Show),Untuk demonya silahkan lakukan scrool pada sidebar maka effectnya akan nampak disana.

Ini bisa sobat lakukan pada widget apa saja ,Popular Post,Recent Comment,Dll, silahkan kenali dulu kode HTML nya ,Untuk lebih jelasnya silahkan Review gambar di bawah ini :

Silahkan Klik untuk memperbesar gambar ,coba lihat tanda panah itu adalah nama widgetnya  nah yang harus sobat perhatikan adalah nama kode HTML  nya silahkan lihat kode yang ada dalam linkaran ,itulah kode HTML yang harus sobat ambil ,jadi dalam hal ini widget G+ Follower Nama kode HTMLnya adalah HTML1 .

Selanjutnya cara penempatan kode Css nya ,karena kita akan memberi Animasi pada widget  G+ Follower maka kode Css nya adalah seperti di bawah ini ,letakkan kode tepat di atas kode ]]></b:skin> berikut kodenya :

#HTML1{
  position:fixed !important;
  position:absolute;
  top:50px;
  right:175px;
  z-index:999;
   max-width:300px;  
}

SelanjutnyaCari kode </body> Letakkan kode di bawah ini tepat di atas kode </body> berikut kodenya :

<script type='text/javascript'>
  //<![CDATA[
$(window).scroll(function() {
    if ($(this).scrollTop() > 700) {
        $('#HTML1').fadeIn();
    } else {
        $('#HTML1').fadeOut();
    }
});

$('#HTML1').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 500);
    return false;
});
//]]>
</script>

Kode yang berwarna Hijau adalah kode HTML Widget jadi sesuaikan dengan kode HTML widget yang ingin di beri animasi .
Kode yang berwarna merah adalah letak ketinggian widget silahkan sesuaikan dengan widget sobat sendiri
Kode yang berwarna Kuning adalah pada ketinggian berapa widget akan Show/hide silahkan  edit menurut keinginan sobat .

Judul Artikel :Auto Hide Widget With Scroll Animation

Terima Kasih Sobat sudah membaca Artikel saya Tentang Auto Hide Widget With Scroll Animation Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih