werkt ook.
In mijn demo staat een vleermuisafbeelding in het voetgedeelte voor een niet zo spookachtig effect, maar je kunt elke andere afbeelding kiezen die je leuk vindt.
Blijf scrollen totdat je de voettekst ziet Lorem ipsum dolor sit amet...
2. Verberg de voettekst Pas de regel z-index:-1 toe op de voettekst om deze achter alle andere elementen op de pagina te plaatsen.
Kleur beide de voettekst af te dekken .
body, html {background-colour: #fff; } footer {width: 100%; hoogte: 200 px; positie: vast; onderkant: 0; achtergrondkleur: # DD5632; z-index: -1; } 3. Pas de onderste marge aan Stel de margin-bottom van de gelijk aan de hoogte van de voettekst (in mijn voorbeeld 200px).
Op deze manier is er onderaan voldoende ruimte om de voettekst zichtbaar te maken wanneer de gebruiker onderaan de pagina scrolt.
lichaam {hoogte: 1000px; marge: 0; margin-bottom: 200px; } Dat is het. Het voetteklijkende effect voor een volledige webpagina is voltooid. Bekijk de demo van Codepen hieronder.
Individuele pagina-elementen Deze techniek kan worden gebruikt voor een individueel HTML-element (met een voettekst) dat lang genoeg is voor een goed bladereffect. De methode is een beetje hacky, omdat deze momenteel niet werkt in Chrome en IE, maar het heeft een goede terugval.
1. Maak een lang artikel Laten we eerst een lang artikel met een voettekst maken. Om semantische code te promoten, koos ik en
Artikel 1 Lorem ipsum dolor sit amet...
Hieronder ziet u de basisstyling van het artikel en de voettekst.
artikel {width: 500px; background-color: # FEF9F3; opvulling: 20px 40px; } artikel> footer {height: 100px; achtergrondkleur: # FE0178; } body {font-family: aalscholver garamond; } Mijn artikel ziet er momenteel zo uit. Natuurlijk kunt u ook andere basisstijlregels gebruiken.
2. Maak de voettekst kleverig
De vorige voettekst is gerepareerd, deze wordt kleverig . Pas de position:sticky regel op de voettekst toe, zodat deze binnen de grenzen van het artikel beweegt, maar toch zijn positie op het scherm behoudt terwijl de gebruiker op en neer scrolt.
artikel> footer {height: 100px; achtergrondkleur: # FE0178; positie: -webkit-plakkerig; positie: kleverig; onderkant: 80px; } De bottom:80px regel corrigeert de positie van de voettekst 80px boven de onderkant van het artikel .
U kunt de waarde naar uw smaak aanpassen, omdat deze het punt bepaalt waar de voettekst begint te verschijnen of verdwijnt terwijl de gebruiker naar beneden of naar boven scrolt.
Geef dezelfde waarde voor de ondermarge van het artikel , zodat er onderaan genoeg ruimte beschikbaar is om het volledige bericht weer te geven.
artikel {width: 500px; background-color: # FEF9F3; opvulling: 20px 40px; margin-bottom: 80px; } 3. Voeg een gedeeltelijk transparante achtergrond toe Nu hebben we een opening nodig naast de onderkant van het artikel waardoor we het kleverige voetje naar beneden kunnen zien scrollen.
Om dit te bereiken, vervangt u de background-color van het artikel door een background-image met een lineair verloop , die van de bovenkant van het artikel naar de bovenkant van de voettekst wordt gekleurd met de achtergrondkleur van het artikel en het resterende gedeelte naar de onderkant is transparant gemaakt .
artikel {width: 500px; opvulling: 20px 40px; achtergrondafbeelding: lineair verloop (naar beneden, # FEF9F3 calc (100% - 120px), transparant 0); margin-bottom: 80px; } De CSS-functie calc(100%-120px) berekent de volledige hoogte van het artikel minus de voettekst . In mijn voorbeeld is het 120px (100px voor hoogte & plus; 20px voor padding).
4. Plaats de voettekst terug
Laten we tot slot de voettekst achter het artikel plaatsen met behulp van de CSS-regel z-index: -1 .
artikel> footer {height: 100px; achtergrondkleur: # FE0178; positie: -webkit-plakkerig; positie: kleverig; onderkant: 80px; z-index: -1; } En dat is het, het individuele pagina-element met het on-scroll onthullende effect is voltooid. Bekijk hieronder de pen van Codepen. U kunt beide use-cases ook vinden op onze Github-pagina.
10 willekeurige feiten over Valentijnsdag die u waarschijnlijk niet wist
Valentijnsdag komt eraan en de verplichte uitwisseling van rozen, chocolaatjes, diner en datumrituelen begint half februari. In de tussentijd krijg ik een uitdaging om ongeveer 10 interessante dingen te schrijven die ik niet wist over Valentijnsdag.Het slechte nieuws is dat ik niet kan schrijven over de gebruikelijke dingen zoals hoe Valentijnsdag zijn naam kreeg of wat de kleur of het aantal rozen in een boeket symboliseert
(Technische en ontwerptips)
Chrome voor iOS is nu Open Source
iOS- en Chrome-ontwikkelaars staan te trappelen omdat Google heeft aangekondigd dat de iOS-versie van de Google-browser nu open source is .Chrome voor iOS is altijd vreemd geweest in andere versies van browsers, omdat het nooit helemaal open source is gemaakt . De reden hiervoor is te wijten aan de aard van het iOS-platform dat vereist dat alle browsers bovenop de WebKit-engine worden gebouwd .De
(Technische en ontwerptips)
nl.hideout-lastation.com
Volledige pagina