Membongkar kesan ajaib Di Sebalik Kesan Pengaki Ayat KPR

Saya sedang menatal laman web ayat KPR apabila saya melihat kesan sejuk ini di bahagian bawah. Setiap kali saya melihat sesuatu seperti ini, saya sentiasa mahu menciptanya semula. Proses saya adalah mudah: Saya mulakan dengan cuba meniru kesan, kemudian membuat blog untuk menerangkan cara ia dilakukan, bertujuan untuk memecahkan reka bentuk yang kompleks kepada langkah yang mudah difahami.

Pada mulanya, saya sering meragui sama ada saya boleh melakukannya, tetapi selepas berfikir secara mendalam, saya biasanya mencari cara untuk memecahkan reka bentuk itu. Dengan menyambungkan kepingan itu, saya berjaya mencapai kesannya. Cukup bercakap — mari selami bagaimana anda boleh membuatnya sendiri!

Memecah Kesan Pengaki Ayat KPR

Di penghujung tapak, anda akan menemui sepanduk KPR di latar belakang. Pada pandangan pertama, ia mungkin kelihatan agak rumit, tetapi ia tidaklah begitu rumit.

Mula-mula, buat div dengan kelas .bekas. Ini akan menjadi elemen akar untuk tutorial kami.

Seterusnya, bahagikan .bekas kepada dua bahagian: .pembungkus-subbekas dan pengaki. Elemen pengaki akan memegang sepanduk KPR.

Sekarang, bahagikan lagi .subcontainer-wrapper kepada dua bahagian. Bahagian atas mengandungi semua kandungan untuk tapak web kami, manakala bahagian bawah dibiarkan kosong tanpa latar belakang—pada asasnya tidak kelihatan, tetapi ia masih mempunyai lebar dan ketinggian tempat pandang. Bahagian bawah adalah penting kerana ia membolehkan kita melihat pengaki.

Sehingga ini, semua elemen berada dalam aliran HTML biasa, iaitu dari atas ke bawah. Sekarang, kita perlu memecahkan pesanan ini dengan meletakkan pengaki di belakang dan membawa .subbekas-pembungkus di hadapan. Untuk melakukan ini, kami akan menetapkan .subcontainer-wrapper kepada kedudukan: absolute relative to .container induknya. Ini akan mengalih keluar .subcontainer-wrapper daripada aliran DOM biasa.

Itu sahaja yang kita perlukan untuk menetapkan kesannya. Sekarang, isi bahagian atas .subcontainer-wrapper dengan kandungan, tetapi biarkan bahagian bawah—div yang tidak kelihatan—kosong. Selain itu, tambahkan kandungan pada pengaki.

Setelah anda menambahkan kandungan, kandungan tersebut sepatutnya kelihatan seperti ini.

Bahagian atas menyembunyikan latar belakang dan semasa anda menatal ke bawah, apabila kandungan yang kelihatan tamat, bahagian yang tidak kelihatan mendedahkan pengaki. Voilà! Itu sahaja — ringkas dan mudah.

_Terima kasih kerana mengikuti! Saya harap anda mendapati panduan ini membantu dan mudah difahami. Kekal ingin tahu dan teruskan meneroka!

asal: KPR-ayat

Tapak demo: Pautan Demo , Untuk demonstrasi ini, saya menggunakan tapak Google I/O (https://io.google/2024/) dan menyesuaikannya untuk mempamerkan konsep yang serupa.

Kod sumber: Pautan Github_

Atas ialah kandungan terperinci Membongkar kesan ajaib Di Sebalik Kesan Pengaki Ayat KPR. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!