Header Lengket Animasi jQuery yang halus di Gulir
Apakah Anda mencari ide unik untuk membuat file header lengket animasi jQuery halus yang ditampilkan di gulungan? Dalam tutorial sederhana ini, Anda akan mempelajari semua tentangnya.
Dengan bantuan transisi CSS3, kita akan menangani bagian animasinya dan jQuery melakukan sisanya tentang menangani bagian show / hidden.
Ide dasar untuk membuat header big hero yang memiliki logo di sisi kiri dan elemen navigasi (Design Creative, Office, Dream) tetap berada di sisi kanan.
Selanjutnya, di bagian tengah header akan ada heading dan teks agar menonjol. Membuat tajuk semacam itu memaksa pengguna untuk tetap berada di situs saat mereka membuka situs.
Sebaiknya buat tajuk seperti itu jika Anda ingin menampilkan beberapa pesan yang sangat penting kepada pengguna situs Anda saat mereka membuka situs.
Pada saat itu bagian header sticky animasi on-scroll adalah sesuatu yang akan tetap tersembunyi. Bagian ini memiliki tautan navigasi yang sama dengan yang kami tambahkan di bagian tajuk besar dan logo di sisi kiri.
Ketika pengguna menggulir halaman ke bawah dan saat mereka mencapai tingkat tertentu, bilah navigasi ramping yang bagus dan bersih dengan latar belakang putih akan muncul dari atas halaman.
Ini akan tetap menempel di bagian atas halaman saat Anda menggulir halaman ke bawah kecuali Anda menggulir kembali ke bagian atas halaman.
Anda mungkin menemukan contoh semacam itu di seluruh web di situs web yang berbeda. Tetapi Anda mungkin tidak dapat menemukan Tutorial CSS tentang pembuatannya.
Struktur HTML untuk Kepala Lengket
Kami akan membangun dua set navigasi yang berbeda. Yang pertama akan tetap dengan tajuk, dan sepertinya tajuk dan navigasi adalah satu.
Anda dapat mengatakan, header akan memiliki navigasi, tetapi masih akan tampak seperti seluruh header dengan menu.
<nav class="top"> <a href="https://codeconvey.com/jquery-animated-sticky-header/#" class="logo">Codeconvey</a> <ul> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Design</a></li> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Creative</a></li> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Office</a></li> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Dream</a></li> </ul> </nav>
Saat pengguna menggulir halaman, navigasi header akan tetap ada, dan navigasi melekat akan menggantikannya.
<nav class="top fixed"> <a href="https://codeconvey.com/jquery-animated-sticky-header/#" class="logo">C</a> <ul> <ul> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Design</a></li> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Creative</a></li> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Office</a></li> <li><a href="https://codeconvey.com/jquery-animated-sticky-header/#">Dream</a></li> </ul> </ul> </nav>
Gaya CSS untuk Header
Pertama-tama, kami akan melakukan beberapa hal dasar untuk logo kami. Kami memiliki dua logo berbeda untuk tajuk standar dan lengket.
nav .logo { color: #fff; float: left; font-family: "Lobster",cursive; font-size: 25px; height: 42px; margin: 20px 0 0 20px; width: 141px; } .top.fixed > .logo { background: #0091de none repeat scroll 0 0; border-radius: 50%; color: #fff; float: left; font-family: "Lobster",cursive; font-size: 40px; height: 52px; margin: 10px 0 0 20px; padding: 0; text-align: center; width: 52px; } i) Penataan Umum
Kami memiliki beberapa gaya umum untuk navigasi seperti gaya ul, li, dan tautan jangkar. Tidak ada yang istimewa di sini, cukup desain navigasi yang terlihat bagus.
/* general style */ nav.top ul { list-style-type: none; margin: 0 20px 0 0; padding: 0; float: right; line-height: 4.375rem; } nav.top ul li { display: inline-block; } nav.top ul li a { color: #fff; text-decoration: none; display: inline-block; font-size: .9375rem; font-weight: 700; margin-left: 9px; position: relative; cursor: pointer; line-height: 1em; padding: 8px 7px 9px; border-radius: 5px; } nav.top ul li a:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } ii) Header Hero Standar
Berikut adalah gaya navbar standar yang tidak lengket tetapi Anda harus ingat bahwa Anda harus mengatur posisinya dengan z-index: 99
Karena kami menggunakan kelas.top untuk kedua navbar. Kami tidak akan menyembunyikan header apa pun. Kami hanya akan menyimpannya di belakang satu sama lain.
/* normal navbar */ nav.top { position: fixed; top: 0; width: 100%; height: 70px; z-index: 99; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1); } .scrolled nav.top { -webkit-transform: translate3d(0, -70px, 0); transform: translate3d(0, -70px, 0); } iii) Bilah Navigasi Lengket
Untuk tajuk tetap, kami akan menggunakan transformasi Properti CSS untuk animasi. Juga, kami mengubah warna latar belakang. Anda juga dapat melakukan lebih banyak modifikasi jika Anda mau.
/* fixed navbar*/ .top.fixed > ul { margin: 0 0px 0 0; } nav.top.fixed { -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0); background: #fff; box-shadow: rgba(0, 0, 0, 0.09804) 0px 2px 4px; } .scrolled nav.top.fixed { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } nav.top.fixed ul a { color: #404B55; } JavaScript
JavaScript tidak panjang, dan kami menggunakan fungsi gulir untuk menyelesaikannya. Sebelum menerapkan kode ini, pastikan untuk menambahkan perpustakaan jQuery ke halaman Anda untuk bekerja untuk header lengket pada acara gulir.
$( document ).ready(function() { var $body = $(document.body); var _SCROLL_FIXED_CUTOFF = _SCROLL_FIXED_CUTOFF || ($(window).height() >= 825 ? 300 : 75), _HEADER_HEIGHT = _HEADER_HEIGHT || 825; $(window).scroll(function(e) { if ($('nav.top[data-no-scroll]').length) return; if (this.pageYOffset >= _SCROLL_FIXED_CUTOFF && !$body.hasClass('scrolled')) { $body.addClass('scrolled'); } else if (this.pageYOffset < _SCROLL_FIXED_CUTOFF && $body.hasClass('scrolled')) { $body.removeClass('scrolled'); } if (this.pageYOffset >= _HEADER_HEIGHT) { _header_carousel_active = false; } else { _header_carousel_active = true; } }); }); Semoga Anda mendapatkan tutorial yang bagus untuk membuat jenis header animasi yang berbeda.
