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.
40 Clever Empty State Designs voor mobiele apps
Bij het starten met een nieuwe mobiele app komen we enkele lege statusschermen tegen. Het is een toestand waarin tot nu toe geen inhoud wordt getoond, in situaties zoals nul-gegevensstatus en status van eerste gebruik . Andere keren kan een foutscherm ook worden beschouwd als een leeg statusscherm. In plaats van deze ruimte letterlijk leeg te laten, hebben ontwerpers deze vrije ruimte gebruikt voor een betere gebruikersbetrokkenheid met het gebruik van slimme illustraties
(Technische en ontwerptips)
10 coole sites om je eigen strips online te maken
In tegenstelling tot wat vaak wordt gedacht, zijn strips niet alleen voor kinderen. Ze hebben de mogelijkheid om een verhaal te vertellen op een visuele manier die echt uniek is en een ervaring op zichzelf . Over het algemeen kun je alleen je eigen strips maken als je kunt tekenen. Of dat is tenminste het idee dat de meesten hebben.Teg
(Technische en ontwerptips)
nl.hideout-lastation.com
Volledige pagina