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.
Nutsnavigatie: hoe het het ontwerp van gebruikerservaringen beïnvloedt
Om een effectieve en gebruikersvriendelijke navigatie te ontwerpen, hoeven we niet alleen na te denken over hoe we onze inhoud kunnen groeperen in goed gestructureerde menu's zodat gebruikers gemakkelijk kunnen vinden wat ze willen, maar ook over hoe ze de hulpmiddelen moeten ontwerpen die ze nodig hebben om te communiceren met de siteNavigatie die niet strikt gerelateerd is aan de inhoud en gebruikers helpt bij het uitvoeren van verschillende acties wordt utility-navigatie genoemd, en het is een minder vaak besproken, maar enorm belangrijk aspect van het ontwerpen van gebruikerservaringe
(Technische en ontwerptips)
20 gratis 3D-modelleringssoftware die u kunt downloaden
3D-modelleringshulpmiddelen helpen individuele ideeën om te zetten in prachtige modellen en prototypen voor verschillende gebieden. Met deze tools kunt u vanaf het begin modellen bouwen en aanpassen, ongeacht of u een beginner of een professionele technicus bent . Populair in verschillende sectoren, zoals film, animatie, gaming, architectuur en interieurontwerp, 3D-modellen zijn de belangrijkste aspecten van verschillende projecten.
(Technische en ontwerptips)
nl.hideout-lastation.com
Volledige pagina