Cara Membuat Footer Footer khusus CSS
Biasanya, kita perlu JavaScript untuk melakukan efek gulir terkait dengan berbagai tindakan pengguna di halaman web. Script melakukan pekerjaan melacak seberapa jauh naik atau turunnya pengguliran halaman, dan memicu suatu tindakan ketika ambang batas tinggi tercapai.
Bukan hal yang buruk untuk menggunakan JavaScript untuk menggulirkan efek. Bahkan ada kasus yang lebih rumit mustahil untuk dipecahkan tanpa JavaScript. Namun ada Peretasan CSS yang dapat mengganti skrip ini di kali.
Posting ini akan menunjukkan kepada Anda how untuk membuat footer mengungkapkan efek pada gulir halaman menggunakan CSS. Kami akan menggunakan dua use case untuk menunjukkan ini: satu untuk seluruh halaman (lihat demo) & satu untuk elemen halaman individual, seperti artikel.
Halaman penuh
Kita perlu membuat catatan kaki itu muncul dari bawah halaman saat pengguna sedang menggulir ke bawah. Juga, ketika mereka menggulir halaman kembali ke atas kebutuhan footer disembunyikan di bawah halaman lagi.
Untuk mencapai tujuan ini, pertama kita harus membuat a footer dengan posisi tetap di bagian bawah layar.
1. Buat Footer Tetap
Ayo tambahkan beberapa konten dan catatan kaki ke halaman pertama. Saya menggunakan tag HTML Dalam demo saya, ada gambar kelelawar yang ditampilkan di dalam footer untuk efek yang tidak terlalu menyeramkan, tetapi Anda dapat memilih gambar lain yang Anda suka. Lorem ipsum dolor sit amet… Pindah ke CSS, hapus ruang apa saja sekitar Berikan beberapa dimensi ( Terapkan Warnai kedua Mengatur Dengan cara ini akan ada ruang yang cukup di bagian bawah untuk footer terlihat ketika pengguna menggulir ke bawah halaman. Itu dia. Footer mengungkapkan efek untuk halaman web lengkap sudah selesai. Lihatlah demo Codepen di bawah ini. Teknik ini dapat digunakan untuk elemen HTML individual (dengan catatan kaki) cukup panjang untuk efek gulir halaman yang tepat. Metode ini agak sedikit meretas, karena saat ini tidak berfungsi di Chrome dan IE, tetapi memiliki cadangan yang layak. Pertama, mari kita buat artikel panjang dengan footer. Untuk mempromosikan kode semantik, saya memilih Lorem ipsum dolor sit amet… Di bawah ini Anda dapat melihat gaya dasar artikel dan catatan kaki. Artikel saya saat ini terlihat seperti ini. Tentu saja Anda dapat menggunakan aturan gaya dasar lainnya juga. Footer sebelumnya sudah diperbaiki, yang ini akan menjadi lengket. Terapkan Itu Anda dapat menyesuaikan nilainya dengan selera Anda, karena itu menentukan titik di mana footer mulai muncul atau menghilang saat pengguna menggulir ke bawah atau ke atas.. Berikan nilai yang sama untuk margin bawah artikel, sehingga akan ada ruang yang cukup di bagian bawah untuk mengungkapkan footer lengkap. Sekarang kita butuh sebuah pembukaan di bagian bawah artikel di mana kita bisa melihat footer lengket bergulir ke bawah dan ke atas. Untuk mencapai ini, ganti Itu Akhirnya, ayo letakkan footer di belakang artikel menggunakan Dan itu saja, elemen halaman individual dengan efek mengungkapkan on-scroll selesai. Lihatlah pena Codepen di bawah ini. Anda juga dapat menemukan kedua use case di halaman Github kami. dan untuk semantik. Namun,
Terus gulir sampai Anda melihat catatan kaki
tag oleh mengatur margin ke 0, dan membuatnya cukup lama menambahkan ketinggian khusus untuk menginduksi pengguliran (jika konten tubuh di halaman Anda cukup panjang untuk menyebabkan pengguliran, Anda tidak harus membuatnya tinggi).lebar dan tinggi) ke footer, dan perbaiki posisinya ke bagian bawah layar dengan posisi: tetap; dan bawah: 0; properti. body font-family: Crimson Text; ukuran font: 13pt; margin: 0; footer width: 100%; tinggi: 200px; posisi: tetap; bawah: 0; warna latar: # DD5632;
2. Sembunyikan Footer
z-index: -1 aturan ke footer untuk letakkan di belakang semua elemen lainnya di halaman. dan tag putih untuk tutupi footer. body, html background-color: #fff; footer width: 100%; tinggi: 200px; posisi: tetap; bawah: 0; warna latar: # DD5632; z-index: -1;
3. Sesuaikan Margin Bawah
margin-bottom dari menandai sama dengan ketinggian footer (dalam contoh saya 200px). tubuh tinggi: 1000px; margin: 0; margin-bottom: 200px;
Elemen Halaman Individual
1. Buat Artikel Panjang
dan .
Artikel 1
artikel lebar: 500px; warna latar: # FEF9F3; padding: 20px 40px; artikel> footer tinggi: 100px; warna latar: # FE0178; body font-family: cormorant garamond;
2. Buat Footer Lengket
posisi: lengket aturan ke footer, sehingga akan bergerak di dalam batas-batas artikel tetapi tetap pertahankan posisinya di layar saat pengguna sedang menggulir ke atas dan ke bawah. artikel> footer tinggi: 100px; warna latar: # FE0178; posisi: -webkit-sticky; posisi: lengket; bawah: 80px;
bawah: 80px aturan memperbaiki posisi footer 80px di atas bagian bawah artikel. artikel lebar: 500px; warna latar: # FEF9F3; padding: 20px 40px; margin-bottom: 80px;
3. Tambahkan Latar Belakang Sebagian Transparan
warna latar belakang artikel dengan a gradien linier gambar latar belakang, yang dari bagian atas artikel ke bagian atas catatan kaki itu diwarnai dengan warna latar belakang artikel, dan bagian yang tersisa ke bawah adalah dibuat transparan. artikel lebar: 500px; padding: 20px 40px; background-image: linear-gradient (ke bawah, # FEF9F3 calc (100% - 120px), transparan 0); margin-bottom: 80px;
calc (100% -120px) Fungsi CSS menghitung tinggi penuh artikel dikurangi dengan footer. Dalam contoh saya, ini 120px (100px untuk tinggi + 20px untuk bantalan).
4. Tempatkan Footer Kembali
z-index: -1 Aturan CSS. artikel> footer tinggi: 100px; warna latar: # FE0178; posisi: -webkit-sticky; posisi: lengket; bawah: 80px; z-index: -1;
