Animasi Navigasi Bootstrap

Animasi Navigasi Bootstrap kali ini adalah memperlihatkan efek ketika layar halaman di scroll ke bawah dan menampilkan navigasi menu atas tampil kembali dengan sedikit animasi.

Twitter Bootstrap

Twitter Bootstrap

Twitter Bootstrap adalah framework untuk web design yang memiliki komponen dalam tampilan menu tetap di atas atau fixed on top.

Apabila halaman website yang melebihi tinggi layar / overflow maka menu tersebut akan tetap di atas apabila kita scroll layar kebawah. Tidak ada animasi untuk navigasi tersebut, hanya tampilan yang kurang menarik dan tentunya statis.

Tambah Animasi Navigasi

Tutorial kali ini akan sedikit tambah animasi navigasi agar bisa terlihat sedikit bagus. Tentunya perlu cara untuk menjadikan navigasi bootstrap tersebut dengan bantuan Animate.css dan jQuery.

Menggunakan Animate.css dan jQuery

Animate.css

Animate CSS

Apa itu Animate.css ? untuk lebih jelasnya tentang animate.css bisa di lihat di halaman websitenya atau dengan mencari di Google untuk keterangan lebih lengkap.

jQuery

jQuery Javascrip Library

jQuery adalah Javascript Library yang saat ini banyak di gunakan untuk web design dan website design. Dengan slogannya “Write Less Do More”, di harapkan penulisan javascript akan lebih singkat dengan penggunaan jQuery.

Animasi Navigasi Bootstrap
Tutorial Animasi Navigasi Bootstrap dengan Animate.css dan jQuery

Kode Animasi Navigasi Bootstrap

Untuk lebih jelasnya, silahkan pelajari kode animasi navigasi bootstrap di bawah ini :

Selanjutnya, silahkan anda buat halaman HTML sederhana dengan menggunakan format contoh Bootstrap Navigation Fixed On Top. Simpan format dan rubah sesuai dengan yang anda inginkan.

Setelah itu, CSS Style bisa anda gunakan sesuai dengan kode animasi navigasi bootstrap yang tercantum di box CodePen. CSS Style menggunakan preprosessor SCSS, ubah ke dalam CSS jika anda kurang mengerti dengan SCSS.

JavaScript menggunakan format jQuery standar yang sering di gunakan, dan simpan pada bagian bawah halaman html sebelum body penutup agar proses loading tidak terlalu lama.

Pembahasan, Pertanyaan dan Jawaban silahkan layangkan pada kolom komentar di bawah.

Kesimpulan

Tutorial animasi navigasi ini dibuat untuk dipelajari dan diharapkan bisa menjadi bahan referensi untuk lebih baik lagi.

Akhir kata, “Keep Explore”.

Dengan selalu kembangkan ilmu yang anda ketahui untuk lebih di perkaya lagi dan tentunya bisa anda bagikan kepada orang lain yang ingin belajar. Silahkan bagikan jika tutorial sederhana ini terasa bermanfaat bagi anda atau teman anda. 😉


Penulis : Arissandi

Web Designer from Bandung, Indonesia.

Tinggalkan Balasan