membuat counterup dengan menggunakan jquery counterup

Pada tutorial kali ini anda akan belajar bagaimana cara membuat 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 pada kesempatan awal ini saya akan memberikan materi tentang jquery plugin yaitu membuat counterup dengan menggunakan jquery counterup.

Apa itu jquery counterUp ? jadi jquery ini membuat sebuah element misal <span>100</span> saat di scrool down dia akan menghitung atau countUp dari 0 sampai 100 secara cepat , jadi seakan-akan angka itu lebih hidup. Penasaran ? oke kita langsung coba membuatnya.

sebelum itu silahkan download 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 pada browser kalian masing-masing dan lihat hasilnya 🙂

oke itu saja untuk materi membuat counterup dengan menggunakan jquery counterup, silahkan di pergunakan sesuai kasus dan kebutuhan masing-masing, semoga bermanfaat dan sampai bertemu pada artikel selanjutnya.

Membuat CounterUp Dengan Menggunakan Jquery CounterUp

Kategori