Animaties in je website

Met het Maakum CMS kun je makkelijk van alles laten bewegen in je website, waardoor je site een stuk dynamischer wordt. Je kunt tekstblokken, kolommen, titels, stukjes tekst en foto's animeren. We leggen op deze pagina alle animeermogelijkheden uit.

Effecten bij een afbeelding

Als je een afbeelding toevoegt bij "Afbeelding / Video / Social media" kun je 6 verschillende effecten toevoegen. Deze worden uitgevoerd zodra de afbeelding in zicht komt. De effecten waaruit je kunt kiezen zijn:

  1. Zoom: De foto zoomt langzaam in
  2. Spring: De foto stuitert even
  3. Elastiek: De foto wordt uit- en in elkaar getrokken/gedrukt
  4. Zoom door muis-over: De foto zoomt langzaam in als de muis over de foto beweegt
  5. Hart klop: Als een kloppend hart
  6. Tada: Dit voorbeeld!

 

Let op: door het combineren van de verschillende animatietechnieken kan het voorkomen dat de ene animatie al gestart is terwijl het object nog niet zichtbaar is door de instellingen van een andere animatie.

Een tekstblok animeren

Je kunt als je een tekstblok wijzigt bij "ANIMATIES" de Titel, Tekst en Foto apart aansturen en laten bewegen zodra het tekstblok in beeld komt. In dit voorbeeld animeert de Titel naar rechts, over een tijdspanne van 2 seconden. De Tekst doet hetzelfde, maar doet er iest langer over (2,76 sec.).

De foto schuift het beeld in naar boven in 2 seconden, maar begint pas na 3 seconden.

Elementen in het tekstveld animeren

Als je een afbeelding rechtstreeks in de teksteditor hebt geplaatst dan kun je hierop ook een (beperkt) aantal effecten op toepassen. Dit kan via het "Afbeelding invoegen/bewerken" knopje in de teksteditor door daar een "class" te kiezen:

 

 

Of onder de knop "Opmaak" bij "Animaties":

 

 

Je kunt niet alleen foto's animeren. Ook als je met je muis een stukje tekst selecteert dan kun je via deze weg wat dynamiek toevoegen.

De optie "Counter" werkt alleen bij nummers. Zodra het nummer in beeld komt wordt er razendsnel van 0 tot het door jou opgegeven nummer opgeteld. Ververs de pagina om het effect opnieuw te zien.

 

COUNTER: 98765