Naar de hoofdinhoud
Alle collectiesHet website systeemAnimatie
Animaties toevoegen aan je website of webshop
Animaties toevoegen aan je website of webshop

[VIDEO] Laat je website of webshop opvallen én leid bezoekers naar je doel, bijvoorbeeld een contactaanvraag doen.

Rik Smeets avatar
Geschreven door Rik Smeets
Meer dan 3 jaar geleden bijgewerkt

Waarom animaties gebruiken?

Animaties gebruiken op je website of webshop is een goede manier om de aandacht van bezoekers te trekken op een specifiek element. Hiermee kun je bezoekers aansporen om een handeling uit te voeren, bijvoorbeeld om contact met je op de nemen. Animaties maken je site of shop opvallend en modern.

Wat zijn animaties?

Animaties zijn bewegingen die je kunt instellen op elementen van je website. Zo kan je bijvoorbeeld een ingangsanimatie instellen op een stuk tekst waardoor deze in het beeld komt geschoven of stuitert. Maar nóg leuker zijn de scroll animaties die meebewegen met het scrollen van je bezoeker:

Hoe gebruik je animaties?

Video uitleg:

Tekst uitleg:

LET OP: animaties stel je per apparaat in, dus op desktop, tablet én mobiel.

  1. Ga naar mijn.graaggoedonline.nl en log in met je gegevens.

  2. Kies de website of webshop waar het om gaat.

  3. Klik met de rechtermuisknop op een element waar je een animatie op wilt gebruiken.

  4. Ga naar "Ontwerp bewerken".

  5. Klik op "Animatie".

  6. Kies bij "Trigger" welke trigger je wilt gebruiken. Je hebt 2 keuzes:
    a) Ingang = start bij het laden van de pagina wanneer het element zichtbaar wordt.
    b) Scrollen = start wanneer het element zichtbaar wordt én reageert daarbij op scroll bewegingen.

  7. Kies bij "Animatie" een animatie naar keuze.

Je ziet nu meerdere aanpassingsmogelijkheden afhankelijk van je trigger keuze:

  • Trigger = Ingang - Duur: hoe lang de animatie duurt (in milliseconden).

  • Trigger = Ingang - Vertraging: wanneer de animatie start (in milliseconden).

  • Trigger = Scrollen - Boven- / onderzijde viewport: waar de animatie begint en eindigt.

  • Intensiteit: de kracht van de animatie. Wanneer je bijvoorbeeld bij de animatie "vervagen van links" de intensiteit hoger zet zal de animatie verder van links beginnen.

Wanneer je bovenstaande stappen hebt gevolgd, weet je hoe je een animatie toe kunt voegen aan een element op je website of webshop en hoe je deze kunt passen. Mocht je nog vragen hebben, neem dan contact op door rechtsonder een chat te starten en wij helpen je graag.

Vindwoorden: animaties, ingangsanimaties, beweging, flitsend, overgang, overgangen

Was dit een antwoord op uw vraag?