Cara Membuat Animasi Nomor Otomatis dengan CSS3 dan Jquery

Kecanggihan teknologi jQuery memang sudah tidak diragukan lagi dalam menunjang kebutuhan sebuah website, jQuery sendiri merupakan sebuah library dari Javascript yang sangat pepouler sekali saat ini dan sumber terbuka dibawah di bawah lisensi MIT. Ditambah lagi dengan CSS3 yang mampu dikombinasikan dengan jQuery membuat website-website saat ini menjadi sangat beragam tampilan nya. Berikut adalah kombinasi dari teknologi jQuery dan CSS3 tentang bagaimana Cara Membuat Animasi Nomor Otomatis dengan CSS3 dan Jquery.Dalam pembuatan nya, animasi ini cukup mudah sekali, silahkan kalian bisa ikuti langkah-langkah berikut ini.

1. Langkah pertama kita buat struktur nya dengan menggunakan kode HTML seperti berikut.

<body>
  <div id="container">
    <div class="bulat merah">1</div>
    <div class="bulat hijau">2</div>
    <div class="bulat kuning">3</div>
    <div class="bulat biru">4</div>
    <div class="bulat pink">5</div>
  </div>
</body>

2. Pada contoh diatas silahkan kalian bisa isikan urutan nomor 1-5, selanjutnya kita akan desain terlebih dahulu tampilan nomor diatas dengan kode CSS3 berikut, untuk memberikan sedikit aksen menarik dalam urutan penomoran.

#container { 
  margin: 30px auto; 
  position: relative; 
  width: 150px; 
  height: 150px; 
  padding: 10px; 
}

#container > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}
.bulat{
  width:auto;
  height:auto;
  line-height:120px;
  font-size:70px;
  font-family: Georgia;
  font-weight:700;
  border:10px solid #000;
  text-align:center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color:#ccc;
}
.merah{
  border:5px solid red;
  color: red;
}
.hijau{
  border:5px solid green;
  color:green;
}
.kuning{
  border:5px solid yellow;
  color:yellow;
}
.biru{
  border:5px solid blue;
  color:blue;
}
.pink{
  border:5px solid magenta;
  color:magenta;
}

3. Tahap selanjutnya adalah, menambahkan kode Javascript berikut untuk membuat animasi urutan nomor otomatis, berikut kode Javascript nya.

<script type="text/javascript">
  $("#container > div:gt(0)").hide();

  setInterval(function() { 
    $('#container > div:first')
      .fadeOut(500)
      .next()
      .fadeIn(100)
      .end()
      .appendTo('#container');
  },  2000);
</script>

4. Kalo sudah, simpan terlebih dahulu kemudian jalankan pada browser masing-masing dan lihat hasilnya. Jika belum berhasil dan tidak ada perubahan animasi apapun, silahkan tambah kode js berikut sebelum tag body.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

5. Dan refresh kembali halaman nya. selesai

Bagaimana, keren bukan ? baiklah sekian artikel mengenai Cara Membuat Animasi Nomor Otomatis dengan CSS3 dan Jquery. Silahkan share artike ini supaya menjadi lebih bermanfaat.

DEMO