Animasi Navigasi Bootstrap Saat Halaman Website Scroll Kebawah

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

Seperti yang sudah kita ketahui, Twitter Bootstrap adalah framework untuk web design yang memiliki komponen untuk menampilkan Menu Tetap Diatas atau Fixed On Top.

Namun apabila halaman website yang melebihi tinggi layar / overflow maka menu tersebut akan tetap diatas apabila kita scroll layar kebawah. Tidak ada animasi yang diterapkan 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 diperlukan 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 dilihat di halaman websitenya atau dengan mencari di Google untuk keterangan lebih lengkap.

jQuery

jQuery Javascrip Library

jQuery adalah Javascript Library yang saat ini banyak digunakan untuk web design dan website design. Dengan slogannya “Write Less Do More”, diharapkan 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 dibawah ini :

See the Pen Bootstrap Navbar Slide In On Scrolldown by ReeZh Design (@reezhdesign) on CodePen.1898

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

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

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

Pembahasan, Pertanyaan dan Jawaban silahkan dilayangkan pada kolom komentar di bawah halaman artikel Tutorial ini.

 

Kesimpulan Animasi Navigasi Bootstrap

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

Akhir kata, “Keep Explore”. Selalu kembangkan ilmu yang anda ketahui untuk lebih dikembangkan lagi dan tentunya bisa dibagikan kepada orang lain yang ingin belajar. Silahkan di Share jika tutorial sederhana ini dianggap bermanfaat bagi anda atau teman anda. 😉

 

What is Front-End Frameworks?

Front-end Frameworks is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Which one’s the Famous Front-end Frameworks, Bootstrap or Foundation. Those two had same idea: make front-end development easier, faster, stronger.

Bootstrap vs. Foundation

What is better: Twitter’s Bootstrap or Foundation by Zurb? The answer may lie in what you are trying to accomplish.

Bootstrap vs. Foundation: Which Framework Should You Choose? [Infographic]