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.
<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.
#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.
<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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
