Normaal gesproken hebben we JavaScript nodig om scrolleffecten uit te voeren die verband houden met verschillende gebruikersacties op webpagina's. Het script bewaakt hoe ver omhoog of omlaag scrollen een pagina neemt en activeert een actie wanneer een drempelwaarde wordt bereikt.
Het is niet bijzonder slecht om JavaScript te gebruiken voor scrolleffecten. In feite zijn er meer gecompliceerde zaken die niet kunnen worden opgelost zonder JavaScript . Er zijn echter CSS-hacks die deze scripts soms kunnen vervangen.
Dit bericht laat je zien hoe je footer-onthullende effecten op de pagina kunt creëren met behulp van CSS. We zullen twee use-cases gebruiken om dit te demonstreren: één voor de hele pagina (zie demo) en één voor individuele pagina-elementen, zoals artikelen.
Volledige pagina
We moeten een voettekst maken die van onder de pagina verschijnt terwijl de gebruiker naar beneden scrolt. Ook wanneer ze de pagina back-uppen, moet de voettekst onder de pagina worden verborgen .
Om dit doel te bereiken, moeten we eerst een voettekst maken met een vaste positie onder aan het scherm.
1. Maak een vaste voettekst
Laten we eerst wat inhoud en een voettekst aan de pagina toevoegen. Ik gebruik de HTML-tags en
nl.hideout-lastation.com
Volledige pagina