Membuat Animasi Fixed Header dengan jQuery
Membuat Animasi Fixed Header dengan jQuery - Animasi Fixed header merupakan suatu animasi dimana ketika user melakukan scroll terhadap halaman web maka akan terjadi penyusutan terhadap elemen header. Saat ini memang banyak sekali tampilan website yang menggunakan animasi fiexed header karena animasi yang ditampilkan cukup menarik. Tidak ada salahnya kalian mencoba animasi ini untuk diterapkan pada tampilan web, untuk itu saya akan share bagaimana Membuat Animasi Fixed Header dengan jQuery. Berikut ini saya akan praktekan cara membuat animasi fixed header.
Langkah 1 : Membuat Animasi Fixed Header dengan jQuery
Buat terlebih dahulu sintak HTML, sebagai struktur awal untuk animasi fixed header.
<div class="fixHeader">
<h1>Animasi Fixed Header dengan jQuery.</h1>
</div>
<div class="scroll"></div>
</body>
Langkah 2 : Membuat Animasi Fixed Header dengan jQuery
Setelah struktur HTML sudah jadi, kita akan mendesain tampilannya terlebih dahulu dengan kode CSS berikut ini.
* { padding: 0; margin: 0 }
.fixHeader {
position: fixed;
width: 100%;
background: #4C2D18;
color:#FFFCD3;
height: 150px;
transition: height 0.2s;
text-align:center;
line-height:150px;
border-bottom: solid 5px #FE5A27;
}
.fixHeader.animateFix {
height: 100px;
line-height:100px;
}
.fixHeader h1 {
font-size:40px;
font-weight:normal;
transition: all 0.2s;
}
.fixHeader.animateFix h1 {
font-size:24px;
transition: all 0.2s;
}
.scroll { height:5000px; }
Langkah 3 : Membuat Animasi Fixed Header dengan jQuery
Terakhir, kita akan menambahkan fungsi dari jQuery untuk menjalankan animasi fixed, silahkan ketikan sintak jQuery berikut.
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var animateFixHead = 200;
$(window).scroll(function() {
var scroll = onScroll();
if ( scroll >= animateFixHead ) {
$(".fixHeader").addClass("animateFix");
}
else {
$(".fixHeader").removeClass("animateFix");
}
});
function onScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
});
</script>
Pastikan library jQuery sudah diload, pada kasus ini saya menggunakan library jQuery versi online. Setelah semua sintak telah diketikan, simpan filenya kemudian silahkan buka pada browser masing - masing dan lihat hasilnya.
Baik, cukup sekian tutorial mengenai bagaimana Membuat Animasi Fixed Header dengan jQuery, semoga 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)
