Membuat CounterUp Dengan Menggunakan Jquery CounterUp
Di panduan kali ini sahabat akan belajar bagaimana cara merancang counterup dengan menggunakan jquery counterup ,
semuanya hallo apa kabar kalian 🙂 selamat datang di tahun 2017 , semoga di tahun yang baru ini kita semakin semangat belajar apapun itu ilmunya. oke di kesempatan awal ini saya akan memberikan bahan mengenai jquery plugin yaitu merancang counterup dengan menggunakan jquery counterup.
Apa itu jquery counterUp ? jadi jquery ini merancang sebuah element misal <span>100</span> ketika di scrool down dia akan menghitung atau countUp dari 0 hingga 100 secara cepat , jadi seakan-akan angka itu lebih hidup. Penasaran ? oke kita seketika coba membuatnya.
sebelum itu silahkan unduh jquerynya di sini
salin code di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<title></title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>
<script src=http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js></script>
<script src=Plugin Jquery/Counter-Up-master/jquery.counterup.min.js></script>
<script>
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 10,
time: 1000
});
});
</script>
</head>
<body>
<span style=margin-left:50%; font-size:40px class=counter>100</span>
</body>
</html>
setelah di salin silahkan di jalankan di browser kalian masing-masing dan lihat hasilnya 🙂
oke itu saja bagi bahan merancang counterup dengan menggunakan jquery counterup, silahkan di pergunakan sesuai kasus dan keperluan masing-masing, semoga bermanfaat dan hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
