Home Kennisbank Huisstijl & instellingen Hoe zet ik animaties aan op mijn website?

Hoe zet ik animaties aan op mijn website?

Robert Oosterloo
Bijgewerkt op · 3 min lezen

Met animaties komen de kolommen van je pagina’s zacht in beeld als een bezoeker naar beneden scrolt. Dat maakt een pagina levendiger. Je zet het aan voor de hele website en kunt per kolom een andere animatie kiezen.

In het kort

  • Ga naar Algemene opties → Animaties en zet Animaties inschakelen aan.
  • Kies een Standaard animatie voor alle kolommen, of Geen.
  • Per kolom kies je een andere animatie in het paneel Animatie instellingen.
  • Houd het rustig: één zachte animatie werkt het best.

Nog geen website op leflite?

Wij bouwen hem samen met jou. Daarna pas je alles zelf aan, precies zoals in dit artikel.

  • Online binnen een week
  • Hosting, SSL en back-ups inbegrepen
  • Vanaf €49,95 per maand
Website van Inspirare Coaching op een laptop

Stap 1: Ga naar Algemene opties → Animaties

Klik op Algemene opties en bovenaan op de knop Animaties.

Stap 2: Zet Animaties inschakelen aan

Zet Animaties inschakelen aan. Daarna verschijnt de keuze voor de standaard animatie.

Stap 3: Kies een Standaard animatie

Bij Standaard animatie staat: ‘Kies een standaard animatie die op alle kolommen zal worden toegepast.’ Je kiest uit:

  • Geen
  • Fade in: de kolom verschijnt langzaam.
  • Fade in vanaf boven, Fade in vanaf links, Fade in vanaf rechts, Fade in vanaf onder: de kolom komt vanaf die kant in beeld.
  • Fade in vanaf links boven, Fade in vanaf rechts boven, Fade in vanaf links onder, Fade in vanaf rechts onder: schuin vanuit een hoek.

Klik op Updaten. Alle kolommen op je website krijgen nu deze animatie. Ook de achtergrondfoto van een sectie komt dan zacht in beeld. Kolommen naast elkaar verschijnen kort na elkaar.

De pagina Animaties met de schakelaar Animaties inschakelen en de keuzelijst Standaard animatie, rood omkaderd
Zet animaties aan en kies een standaard.

Per kolom een andere animatie

Wil je één kolom anders laten bewegen, bijvoorbeeld een foto die van rechts komt? Open de pagina en klik op de kolom. Rechts in de zijbalk staat, als animaties aanstaan, het paneel Animatie instellingen. Zet Animaties activeren op deze kolom aan en kies bij Animatie de beweging. Werk de pagina bij. In de editor zie je aan een klein icoon op de kolom dat er een eigen animatie op staat.

Hoe je secties en kolommen maakt, lees je in een sectie toevoegen en in kolommen indelen.

Een geselecteerde kolom in de editor met rechts het paneel Animatie instellingen, met het vinkje Animaties activeren op deze kolom en de keuzelijst Animatie rood omkaderd
Geef een kolom een eigen animatie in het paneel Animatie instellingen.

Alleen een paar kolommen laten bewegen

Staat er een standaard animatie, dan beweegt elke kolom. Eén kolom zonder animatie kan dan niet. Wil je alleen een paar kolommen laten bewegen, kies dan bij Standaard animatie voor Geen en zet de animatie aan op de kolommen waar je hem wilt.

Tip: blijf rustig. Kies één zachte animatie, zoals Fade in vanaf onder, en gebruik die overal. Veel verschillende bewegingen leiden af van je tekst. Animaties maken je website niet merkbaar trager, maar een rustige pagina leest wel prettiger. Meer over snelheid lees je in waarom je website traag is.

Lukt het niet?

  • Je ziet het paneel Animatie instellingen niet. Animaties inschakelen staat uit, of je hebt een sectie geselecteerd in plaats van een kolom.
  • Er beweegt niets. Kies een Standaard animatie die niet Geen is, of zet de animatie aan op de kolom. Ververs je website.
  • Eén kolom moet stil blijven, maar beweegt toch. Met een standaard animatie beweegt elke kolom. Zet de standaard op Geen en kies per kolom.
  • Een schermafbeelding van je pagina is half leeg. Kolommen verschijnen pas als je erlangs scrolt. Scroll eerst rustig naar beneden.
  • Kom je er niet uit? Neem contact met ons op. Meer opties vind je in alles over de Algemene opties.

Deel dit artikel

Robert Oosterloo

Robert Oosterloo is eigenaar en UX/UI-designer van Lef Creative in Kollum. Hij ontwerpt websites, webshops en software voor ondernemers in Noord-Nederland.

Lees ook

Ook zo’n website?

Je leest hier hoe makkelijk je een leflite-site zelf bijhoudt. Wil je er ook een? We denken vrijblijvend met je mee.

Liever direct contact? Bel Robert op 06 35 66 47 73 of stuur een .