Cara Membuat Animasi Icon Toggle

Cara Membuat Animasi Icon Toggle - Pada tutorial yang akan saya bahas kali ini adalah tentang bagaimana Cara Membuat Animasi Icon Toggle, jika kalian pernah melihat tampilan icon toggle pada desain menu dropdown bootstrap terlihat seperti icon bar. Nah, kali ini saya akan mencoba membuat icon mirip seperti icon yang ada pada menu dropdown bootstrap, hanya saja akan ada perbedaan ketika tombolnya diklik, penasaran sperti apa ? langsung saja kita akan praktekan membuat animasi icon toggle berikut ini.

Langkah 1 : Cara Membuat Animasi Icon Toggle

Pada kasus yang akan kita buat kali ini, yakni kita akan membuat animasi icon toggle nya dengan CSS3 sebagai desainnya, dan jQuery untuk menjalankan animasi toggle. Baik, untuk langkah pertama kita akan buatkan terlebih dahulu struktur HTML sederhana seperti berikut.

<body>
    <div id="wrapper">
      <span class="toggle"></span>
      <span class="toggle"></span>
      <span class="toggle"></span>
    </div>
</body>

Langkah 2 : Cara Membuat Animasi Icon Toggle

Langkah selanjutnya kita akan mendesain tampilan icon toggle dengan sintak CSS3, dimana kita akan mendesain seperti icon bar, untuk itu silahkan ketikan sintak CSS3 berikut ini.

body { background: #DAD9DE; }
#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width:100px;
  height:100px;
  margin: auto;
}
.toggle {
  display: block;
  width:100%;
  height:20%;
  margin-top:20%;
  background: #92AE01;
  transition:0.25s;    
  user-select: none;  
  border-radius: 10px;        
}
.animation .toggle:nth-child(1) {
  transform:translateY(40px) rotate(135deg);
}
.animation .toggle:nth-child(2) {
  opacity: 0;
}
.animation .toggle:nth-child(3) {
  transform:translateY(-40px) rotate(-135deg);
}

Langkah 3 : Cara Membuat Animasi Icon Toggle

Setelah membuat struktur HTML, kemudian mendesain tampilannya dengan sintak CSS3, langkah terakhir kita akan buat fungsi toggle dengan memanfaatkan fungsi yang terdapat didalam jQuery yakni toggleClass.

<!-- Code jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#wrapper').click( function() {
          $(this).toggleClass('animation');
        })
    });
</script>

Pada kasus ini, saya menggunakan library jQuery online, silahkan kalian bisa menghubungkan library secara offline ataupun online seperti sintak diatas. Setelah semua sintak telah diketikan, simpan filenya kemudian silahkan jalankan di browser dan lihat hasilnya. Maka ketika diklik icon nya akan terjadi animasi perubahan icon bar menjadi silang.

Baik, itulah diatas tutorial bagaimana Cara Membuat Animasi Icon Toggle, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

26 April 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat