Auto Hide Widget With Scroll Animation - Hallo Sob Jody Blog, artikel kali ini berjudul Auto Hide Widget With Scroll Animation, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Auto Hide Widget With Scroll Animation
link : Auto Hide Widget With Scroll Animation

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 .

Demikianlah Artikel Auto Hide Widget With Scroll Animation

Sekian Auto Hide Widget With Scroll Animation, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Auto Hide Widget With Scroll Animation dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/06/auto-hide-widget-with-scroll-animation.html Semoga artikel ini bisa bermanfaat.

Tweet