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.

<body>
    <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" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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.

16 Januari 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat