Tutorial Membuat Scroll Presentase - Hendrix Cat

    Social Items

Hendrix Cat

Metaltaila.co Adalah Blog Berbagi Template Premium


Hai selamat malam nah pada kesempatan ini saya akan bahas tutorial bagaimana cara membuat Presentasi pada scroll di blog kalian. tentunya dengan adanya animasi ini akan menambah cantik blog kalian untuk itu silahkan simak langkah ini dengan sebaik mungkin.
Pertama silahkan masuk menu Template kemudian pilih Edit HTML
Selanjutnya salin kode berikut (di bawah) dan simpan di atas/sebelum kode ]]></b:skin> or </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}
Kemudian simpan kode di bawah tepat di bawah kode </head>
<div id='scroll'></div>
Selanjutnya simpan kode berikut tepat di atas </body>


<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>
dan Terakhir save.. Lihat Hasilnya
Nah ok sobat mungkin itu saja tips yang kali ini saya bisa berikan semoga bermanfaat. Sekian dan terimakasih

Tutorial Membuat Scroll Presentase


Hai selamat malam nah pada kesempatan ini saya akan bahas tutorial bagaimana cara membuat Presentasi pada scroll di blog kalian. tentunya dengan adanya animasi ini akan menambah cantik blog kalian untuk itu silahkan simak langkah ini dengan sebaik mungkin.
Pertama silahkan masuk menu Template kemudian pilih Edit HTML
Selanjutnya salin kode berikut (di bawah) dan simpan di atas/sebelum kode ]]></b:skin> or </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}
Kemudian simpan kode di bawah tepat di bawah kode </head>
<div id='scroll'></div>
Selanjutnya simpan kode berikut tepat di atas </body>


<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>
dan Terakhir save.. Lihat Hasilnya
Nah ok sobat mungkin itu saja tips yang kali ini saya bisa berikan semoga bermanfaat. Sekian dan terimakasih
Load Comments

Subscribe Our Newsletter

Notifications

Disqus Logo