Smooth scrolling met CSS
Leerdoelen
In deze korte oefening:
- ga je centreren met CSS grid
- Maak je kennis met smooth-behaviour eigenschap
Opdracht
- Maak een vertikaal en een horizontaal smooth (vloeiend) scrollend menu.
Doe dit op een van de volgende manieren:- lees onderstaande instructies naast de video's en probeer daarmee het resulaat te bereiken zoals in de eerste video.
- doe mee met de onderstaande video's
- doe met de instructie mee, die de docent voor de kas uitvoert.
- Lever dit werk in zie: inleveren
Scrolling CSS 0: het resultaat (00:00:48)
Met CSS kunnen we eenvoudig een vorm van smooth scrolling realiseren.
Dat kan zowel horizontaal als verticaal.
Hier het resultaat dat zonder JS gemaakt is: puur HTML en CSS.
Smooth scrolling CSS 1: Al direkt smooth scrollen (00:09:53)
We maken het navigatiemenu en een aantal secties in HTML.
De href-waarde van de link is een #, gevolgd door de id-naam van de sectie waarnaar gescrolled moet worden.
Het is gewoon een interne link binnen de zelfde pagina.
De sections hebben dus ieder een eigen id.
Als de sections ook een hoogte van 100vh krijgen, kan dit al getest worden. Er is dan al scrolling als is deze nog niet smooth.
Dat laatste kan met een CSS-eigenschap aan de html-tag:
scroll-behaviour: smooth;
Hiermee is een verticale smooth scrolling al gerealiseerd!
Smooth scrolling CSS 2: kleuren en centreren (00:04:08)
Om het menu in beeld te houden, gaan we mindeze turorial hem links-midden plaatsen boven het main element met de inhoud sections.
Het nav-element krijgt een position fixed. Als de hoogte gelijk wordt an de viewport, kun je hem met CSS Grid eenvoudig in het midden plaatsen:
display: grid, en align-content: center;
Geef de nav een breedte zodat de linkjes er netjes in passen.
Geef de sections eerst een linkerpadding, die zo groot is dat er geen conflict ontstaat met de navigatie.
Ook de inhoud van de sections is -als deze makkelijk past- te centreren.
Met display: grid; align-content: center; justify-content: center; staat alles mooi in het midden.
Elke sectie heeft een id, dus kun je elke een eigen achtergrond geven. De meeste achtergronden gedijen met een witte tekstkleur.
Smooth scrolling CSS 3: de navigatie stijlen (00:10:07
De list-eigenschappen zoals het het puntje, de inspringing moeten verwijderd worden.
Vervolgens kun je alles stijlen in het nav a element.
Denk aan display-type block, padding, weghalen van onderstreping.
Zorg ook voor een hover-effect.
Smooth scrolling CSS 4: nu horizontaal (00:07:31)
Sinds CSS grid is het snel en eenvoudig om de sections naast elkaar te plaatsen.
Ze hebben 1 parent: het main-element. Omdat er 5 sections zijn, geef je deze 500vw aan breedte.
Met grid-template-columns: repeat(5, 1fr); krijgt elke kolom 100vw tot zijn beschikking. Het smooth scrollen werkt ook gelijk.
Je mag een hinderlijke verticale scrollbalk verwachten.
Als je de sections een hoogte van 100vh geeft en ze hebben ook verticale padding, dan worden ze hoger dan 100vh.
Geef ze dus box-sizoing: border-box; zodat die hoogte-toename niet plaatsvindt.
Blijft er soms nog een klein stukje te hoge pagina over. Geef dan zowel de body- als het html-element een overflow-y: hidden; en alles staat strak.
Smooth scrolling CSS 5: nieuwe wensen (00:05:06)
Soms is er meer inhoud. Dan is het onhandig als de section een display-type grid heeft.
Maak er dan een block-type van. De extra inhoud maak je beschikbaar door een overflow: auto.
Een ander issue is dat je bij alledaagse situaties ook de gebruiker wil laten zien welke link in het menu actief is.
Daarvoor moeten we dan toch JavaScript gebruiken, wat daarna ook weer nieuwe perspectieven kan bieden.
Inleveren
- Na afloop plaats je deze training online in je bewijzenmap.
- Valideer jouw pagina's op Markup Validation Service van W3C.
- Voeg aan de footer validatie-icoontjes toe:
<a href="http://validator.w3.org/check?uri=referer" target="_blank"> <img src="https://blanken5.home.xs4all.nl/afb/valid-html5-blue.png" alt="Valide HTML5"></a> <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"> <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue.gif" alt="Valide CSS"> </a> - Resultaat online; het linkje in een README.md-document en
- Plaats de GitHub-link in ELO Magister.