Sweepanimaties met CSS
De techniek die hier wordt besproken is bij uitstek geschikt voor een één-pagina site. Dat is een (meestal) kleine website, die één onderwerp behandelt. Dit soort sites wordt vaak ingezet om kortdurende evenementen te promoten of om iets te presenteren. Soms bevat zo'n site spectaculaire animaties.
Op deze bladzijde wordt zo'n één-pagina site uitgebreid besproken. De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de foto's.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Klik een beetje rond op het menu in de bovenbalk.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 75 (april 2015), pag. 58 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script en de auteur zijn niet meer te vinden op internet.
Voor deze site is de vormgeving van het voorbeeld aangepast en is de code ontdaan van overbodige zaken.
- Er worden twee items besproken:
- De werking van het script.
- Zelf een site mee bouwen.
- De werking van het script
- De code bestaat uit drie delen: HTML, CSS (in de file styles.css) en wat JavaScript (in de file sweepanimaties.js),
om te reageren op een muis-klik op het menu.
N.B.: Het zou ook moeten werken met een tikje op een aanraakscherm.
- HTML
- De HTML5-structuur is hier van belang:
- Bovenaan in de <body> staat een <nav>-tag. Deze bevat de items in het menu. De links refereren aan bookmarks die zijn opgegeven als id, niet als name.
- Voor elke bookmark is er een <article>. Daar in staat de content die hoort bij het betreffende menu-item.
- Elk <article> bevat een <section>, met daarin:
— Een foto (<img>-tag met alleen de naam van het foto-bestand, zonder verdere attributen. Zo nodig stel je die in in de CSS.
— Een pagina-kop (<h1>-tag),
— Een onder-kop (<figure>-tag).
— Een of meerdere paragrafen met tekst (<p>-tag). In het voorbeeld is dat lorem ipsum tekst. - Onderaan de pagina staat een een voettekst (<footer>-tag).
- Tenslotte is er nog het bewegende vlak. Dat is een lege tag die via CSS wel afmetingen heeft: <div id="animElm_swipe">).
- JavaScript
- Het JavaScript wordt alleen gebruikt om de geanimeerde pagina-overgangen te starten. Daarvoor is het nodig dat de menu-links gaan reageren op een klik of tik.
- Bij het laden van het JavaScript wordt een event-listener gemaakt die gaat werken als de pagina helemaal is geladen ('onload'). De code staat als laatste in sweepanimaties.js.
- In een lus over alle links binnen een <nav>-tag worden er event-listeners gemaakt die reageren op een muisklik
of een aanraking. Hierdoor werken die links in het menu.
- Verder is er een variabele navClick. Deze bevat een function die het wisselen van de pagina's regelt. Dit gebeurt door het wijzigen van de data-attributen data-animation en data-status. De CSS-code zorgt er voor dat de aanpassingen op het scherm worden doorgevoerd.
- data-animation kan de waarden krijgen "in" of "out". Dat hangt samen met de draairichting van de animatie: linksom of rechtsom. De draairichting wordt ook nog bij gehouden in de variabele swipeDirection, die "left" kan zijn of "right".
- data-status kan de waarden krijgen "open" of "closed". Alleen de zichtbare
pagina heeft "open", de rest is allemaal "closed".
- Het wisselen van de pagina's gaat in een slimme volgorde:
- Draai de 'afdekking' boven de huidige pagina.
- Sluit de huidige pagina.
- Open de gewenste pagina.
- Draai de 'afdekking' verder door.
- CSS
- De CSS begint met een eenvoudige reset. Hier wordt ook het lettertype ingesteld.
- De navigatie en de voettekst worden bovenaan resp. onderaan de pagina gehouden. De z-index is ingesteld op 9999, zodat de animatie onder de navigatie- en voettekst kan blijven.
- De hoogte van de navigatie en de voettekst-balk is ingesteld op 2.0em. Geadviseerd wordt om de hoogte van beide balken gelijk te houden. Dat geeft een evenwichtig beeld.
- De achtergrondkleur van de navigatie en de voettekst-balk is ingesteld op zwart (#000). Ook hier wordt geadviseerd
om de kleuren van de balken gelijk te houden. De tekstkleuren kun je verschillend maken, maar zorg voor een goed
contrast met de achtergrondkleur.
- De afmetingen van de foto stel je in bij article section img:nth-of-type(1). Als je de plaats van de foto's wilt variëren, moet je voor alle articles een apart blok met article section img:nth-of-type() maken.
- De foto op de achtergrond is dezelfde als in de tekst, maar dan veel groter. Door het opschalen wordt de foto onscherp.
De achtergrond-foto hoeft overigens niet hetzelfde te zijn als de foto in de tekst. Hier is dat wel gedaan, want het geeft
een bijzonder effect. Je stelt de achtergrondfoto per <article> in met article:nth-of-type() { background-image:url() }.
Merk op dat de achtergrond-foto over het hele <article> wordt gespreid met background-size:cover. - De kleuren van tekst en achtergrond van het <article> worden ingesteld door de <section> die er binnnen ligt. De achtergrond (zwart) is een beetje transparant (rgba(0,0,0,0.7)).
- De tekstelementen die zich binnen de <section> bevinden zijn <h1>, <figure> en <p>. <h1> en <figure> worden apart opgemaakt, voor <p> wordt geen opmaak gegeven. Daarvoor worden dus default-waarden gebruikt.
- Opmerking: In deze code wordt <figure> ingezet voor een onder-kop. Eigenlijk is <figure>
daar niet voor bedoeld. Correcter zou zijn om hier <h2> te gebruiken.
- De animaties lijken complexer dan ze zijn. Er zijn animaties voor het wisselen van de pagina's en animaties die het bewegende vlak besturen. Die lopen tegelijkertijd.
- Alle animaties hebben de eigenschap forwards, waardoor de element niet terugspringt naar de oorspronkelijke toestand
als de animatie is afgelopen. Verder zijn de animaties linear, waardoor de snelheid tijdens de animatie constant is.
- Als er op een menu-item wordt geklikt, begint het (hier grijze) vlak te bewegen. Ondertussen krijgt de openstaande pagina de data-status="closed". De te openen pagina krijgt data-status="open".
- Daarvoor zijn er de @keyframes anim_pullIn resp. anim_pullOut. Deze verlopen lineair. Als 51% van de animatie is gedaan wordt de waarde van top in eens veranderd, van 0% naar -100% of andersom (oorspronkelijk is top ingesteld op -100%). De pagina's verschuiven dus.
- Dat dit 50% van de looptijd blijft wachten, heeft tot gevolg dat de beweging pas plaatsvindt als het draaiende vlak het
hele scherm bedekt. Zo werken de animaties goed samen.
- Voor de beweging van het grijze vlak zijn er de @keyframes anim_swipeIn resp. anim_swipeOut. Eén van deze twee wordt gebruikt, afhankelijk van of het vlak linksom of rechtsom moet draaien.
- Het JavaScript houdt bij of het vlak linksom of rechtsom draait, in de variabele sweepDirection. Daarbij wordt tegelijkertijd het attribuut data-animation op "in" of op "out" gezet. De CSS reageert op de verandering van het attribuut door het vlak te verdraaien van -90° naar 270° of andersom.
- Het verdraaien van het vlak duurt 2 seconden. Precies op de helft daarvan (als het vlak het hele window bedekt) wordt van pagina gewisseld.
- Als je de draaibeweging langer of korter wilt maken, moet je duur van alle vier de animaties veranderen. Ze moeten wel
allemaal even lang zijn, anders lopen de beweging en het wisselen van de pagina uit de pas.
- De afmetingen en de positie van het grijze vlak (#animElm_swipe) kun je maar beter niet veranderen. Uitvoerig testen heeft geleerd dat de afmetingen en de positie van het vlak optimaal zijn. Waarom dat zo is weet ik niet.
- De kleur van het grijze vlak kun je natuurlijk wèl naar eigen smaak aanpassen.
- De z-index van het grijze vlak moet groter zijn dan nul en kleiner dan 9999, zodat het boven de articles
ligt en onder de nav-bar en de footer.
- Zelf een site mee bouwen
- Download de .zip-file en pak hem uit. Hernoem de file html478a.htm naar bijvoorbeeld index.html.
- Neem de naam van de foto-bestanden op in de files html478a.htm en styles.css, zoals hierboven is aangegeven. Je hebt nu een werkend template voor je site.
- Verander desgewenst de kleuren van de achtergrond en van de tekst.
- Voeg menu-items toe (met de bijbehorende <article>-tags, of verwijder ze juist.
- Vervang de koppen en de lipsum-tekst door je eigen content (inclusief
de <footer>).
- Maak de hoeveelheid content niet te groot, anders wordt de pagina traag door (te) lange laadtijden.
- Als je wilt dat dit ook werkt met oudere browsers, moet je de vendor-prefix
-webkit- toevoegen aan al deze CSS-eigenschappen:
— animation
— transform:rotate()
— transform-origin
— @keyframes (wordt @-webkit-keyframes)
Deze eigenschappen zijn al aanwezig in de file styles.css als commentaar.
Downloaden:
Druk op de knop:
File: voorb478.zip, 3725 bytes.
