2 efek gulir (scroll) dengan indikator yang keren
Jika kamu mengklik video lain saat menonton sebuah video di Youtube, mungkin kamu akan melihat ada sebuah Indikator berwarna merah pada bagian atas laman (progressbar).
Nah indikator seperti ini lah yang akan di adopsi sebagai penggaya saat mengulir (Scroll) halaman blog. Jadi efeknya bekerja sebagai animasi saat menggulir laman, bukan untuk animasi dalam membuka laman tersebut.
Untuk melihat efeknya, silahkan gulir halaman pada bagian demo yang di sediakan dan perhatikan indikator (bagian atas laman demo) yang bergerak sesuai dengan seberapa besar bagian laman yang tengah di muat.
Nah, untuk membuat efek gulir seperti yang akan saya bagikan kali ini kita butuh menggabungkan beberapa Script termasuk Jquery dan tentu saja CSS dan HTML agar tampilannya benar-benar sempurna.
Jquery
Jika sudah menggunakan Jquery, langkah ini bisa dilewati. Jika belum, kamu dapat menggunakannya melalui kode yang ada di bawah ini.
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">
Kode CSSnya
.progress-indicator {
position: fixed;
top: 30px;
right: 30px;
width: 100px;
height: 100px;
}
.progress-count {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
color: #0082FF;
}
svg {
position: absolute;
}
circle {
fill: rgba(255,255,255,0.9);
}
svg .animated-circle {
fill: transparent;
stroke-width: 40px;
stroke: #0A74DA;
stroke-dasharray: 126;
stroke-dashoffset: 126;
}
.progress-indicator-2 {
position: fixed;
top: 0;
left: 0;
height: 8px;
background-color: #0A74DA;
}
Untuk mengubah warna dan besarnya indikator, Lihat dan edit pada selector progress-indicator-2. height: 8px; untuk tinggi dari indikatornya (8px) sementara background-color: #0A74DA; adalah warna latarnya. #0A74DA adalah Kode Warnanya, silahkan ganti sesuai keinginan.
Kode Scriptnya
(function(){
var $w = $(window);
var $circ = $('.animated-circle');
var $progCount = $('.progress-count');
var $prog2 = $('.progress-indicator-2');
var wh, h, sHeight;
function setSizes(){
wh = $w.height();
h = $('body').height();
sHeight = h - wh;
}
setSizes();
$w.on('scroll', function(){
var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
updateProgress(perc);
}).on('resize', function(){
setSizes();
$w.trigger('scroll');
});
function updateProgress(perc){
var circle_offset = 126 * perc;
$circ.css({
"stroke-dashoffset" : 126 - circle_offset
});
$progCount.html(Math.round(perc * 100) + "%");
$prog2.css({width : perc*100 + '%'});
}
}());
Kode HTMLnya
<div class="progress-indicator-2"></div>
Tempatkan kode HTML di atas di bawah <body>.
Jika semua telah kamu terapkan dengan benar, maka hasilnya akan seperti pratinjau di bawah ini.
Dan ini lah efek gulir berikutnya.
Indikator yang di hasilkan kali ini cukup menarik, bagian halaman yang di muat di tampilkan dalam persentasi di tambah dengan efek progressbar yang bisa di bilang cukup atraktif.
Kode yang di gunakan, masih sama dengan kode yang telah saya tulis di atas. Yang yang berbeda kali ini hanyalah kode HTMLnya.
Jika ingin menggunakan efek yang ke dua ini, hapus kode HTML bagian pertama dan ganti dengan kode HTML yang ada di bawah ini.
Kode HTMLnya
<div class="progress-indicator"> <svg><g><circle cx="0" cy="0" r="20" stroke="black" class="animated-circle" transform="translate(50,50) rotate(-90)" /></g> <g><circle cx="0" cy="0" r="38" transform="translate(50,50) rotate(-90)" /></g></svg> <div class="progress-count"></div> </div>
Tempatkan kode HTML di atas di bawah <body>.
Jika semua telah kamu terapkan dengan benar, maka hasilnya akan seperti pratinjau di bawah ini.
Hasilnya sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.