Cara Membuat Animasi Toggle Underline
Seperti kita ketahui bahwa animasi sangat populer sekali saat ini, ada berbagai cara untuk membuat sebuah animasi pada sebuah tampilan web, bisa dengan CSS3, dengan jQuery ataupun gabungan dari keduanya. karena dengan keunikan dalam sebuah tampilan membuat animasi banyak sekali dipakai oleh para developer untuk menunjang sebuah tampilan web yang menarik. Nah berikut ini, akan saya kasih referensi untuk kalian yang ingin membuat animasi khusus nya animasi underline, langsung saja simak tutorial cara membuat animasi toggle underline.
untuk membuat animasi underline, langkah pertama adalah membuat struktur HTML5 seperti berikut.
<body>
<ul id="list-category">
<li class="item active"><a href="#">Graphyc Design</a></li>
<li class="item"><a href="#">Conversion-Rate Optimization</a></li>
<li class="item"><a href="#">Search Engine Optimization</a></li>
<li class="item"><a href="#">Digital Marketing</a></li>
</ul>
</body>Setelah membuat struktur HTML5 seperti diatas, langkah selanjutnya adalah mendesain tampilah list item yang telah kita buat diatas dengan kode CSS3 berikut ini.
body {
background:#0C1127;
margin:0;
padding:40px;
}
#list-category {
padding:0;
margin:0;
max-width:200px
}
#list-category li {
list-style:none;
font-family:sans-serif;
text-transform:uppercase;
padding:15px 0;
position:relative;
margin-bottom:10px;
opacity:0.3;
cursor:pointer;
font-weight:700;
letter-spacing:2px;
font-size:13px;
line-height:1.3em;
text-align:right;
transition:all ease 0.2s;
}
#list-category li:hover {
opacity:0.6;
}
#list-category a {
text-decoration:none;
color:#fff;
}
#list-category li a:after {
content: " ";
background: #FCA700;
width: 0%;
height: 2px;
position: absolute;
right: 0;
bottom: 0;
transition:all ease 0.4s;
}
#list-category li:hover a:after {
width:100%;
width:25%;
}
#list-category li.active {
opacity:1;
}
#list-category li.active a:after {
content: " ";
background: #FCA700;
width: 100%;
height: 2px;
position: absolute;
right: 0;
bottom: 0;
}
Langkah terakhir adalah kita akan tambahkan sedikit kode jQuery seperti berikut.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('.item').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
</script>Setelah semua kode diketikan, langkah terakhir simpan file kemudian buka pada browser masing-masing dan lihat hasil, maka akan terlihat tampilan seperti berikut.
Dan jika kalian arahkan atau kursor disorot pada area list akan terlihat animasi underline bergerak lurus secara otomatis. Baiklah itu tadi tutorial sederhana tentang cara membuat animasi toggle underline, semoga 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)
