Pagina-animaties
Met pagina-animaties laat je losse elementen de pagina in bewegen zodra de pagina op het scherm verschijnt. Zo wordt een statische opmaak een stuk levendiger.
Een animatie aan een element toevoegen
- Open een pagina in de pagina-editor
- Klik op een element (tekst, afbeelding, vorm enzovoort)
- Open in het rechterpaneel het onderdeel Animatie en klik op + Animatie in toevoegen. Het element krijgt dan een Vervagen van 1 seconde
- Kies eventueel een ander Type. Als je het type wijzigt, wordt de animatie meteen opnieuw afgespeeld, zodat je ziet hoe hij eruitziet
Animatie-instellingen
| Instelling | Wat het doet |
|---|---|
| Type | De animatiestijl (zie de opties hieronder) |
| Afspeelduur (s) | Hoe lang de animatie duurt, in seconden |
| Vertraging (s) | Hoeveel seconden er wordt gewacht voordat de animatie start |
| Easing | De versnellingscurve: linear, ease, ease-in, ease-out, ease-in-out |
| Initiële waarden | Onder Geavanceerde waarden: stel de beginwaarden voor doorzichtigheid, schaal en positie in om meerdere effecten te combineren |
Animatietypes
| Type | Effect |
|---|---|
| Vervagen | Het element vervaagt van transparant naar zichtbaar |
| Schalen | Het element groeit vanuit een kleiner formaat |
| Schuiven naar links | Het element schuift in vanaf rechts |
| Schuiven naar rechts | Het element schuift in vanaf links |
| Schuiven naar boven | Het element schuift in vanaf onderen |
| Schuiven naar beneden | Het element schuift in vanaf boven |
| Stuiteren naar links | Het element stuitert in vanaf rechts |
| Stuiteren naar rechts | Het element stuitert in vanaf links |
| Stuiteren naar boven | Het element stuitert in vanaf onderen |
| Stuiteren naar beneden | Het element stuitert in vanaf boven |
Animaties combineren
Met initiële waarden kun je effecten stapelen. Een voorbeeld: kies het type Schalen en zet de initiële Doorzichtigheid op 0. Het element schaalt en vervaagt dan tegelijk in beeld.
Klap Geavanceerde waarden uit in het animatiepaneel om de velden Doorzichtigheid, Schalen, Verschuiven X en Verschuiven Y voor de beginstand van het element te zien.
Animaties opnieuw afspelen
Als je de afspeelduur of vertraging wijzigt, wordt de animatie niet vanzelf opnieuw afgespeeld. Klik op Animatie afspelen in de werkbalk onderaan de editor om alle animaties op de pagina tegelijk opnieuw af te spelen.
Terugzetten
Klik onder Geavanceerde waarden op Standaardwaarden herstellen om eigen initiële waarden te wissen en opnieuw te beginnen. Wil je de animatie helemaal weghalen? Klik dan op het kruisje naast Animatie in.
TIP
Op apparaten met weinig rekenkracht (zoals sommige SoC-schermen) spelen animaties mogelijk niet af. Test op de hardware die je gaat gebruiken als vloeiende animaties belangrijk zijn.