Wix Editor: Een animatie toevoegen en aanpassen

Leestijd 4 minuten
Gebruik animaties om je website tot leven te brengen. Voeg effecten toe om creatieve, opvallende pagina's te maken. Je kunt kiezen hoe en wanneer je animaties worden afgespeeld — slechts één keer, tijdens het scrollen, doorlopend en meer. 
Je kunt animaties toepassen op verschillende elementen en zelfs verschillende effecten toepassen op hetzelfde element op zowel je desktop als mobiele websites. Onze mobiele animaties zijn ontworpen voor kleinere schermen, zodat je indruk kunt maken op je bezoekers op elk apparaat. 
Een gif met verschillende beeldanimaties terwijl de website wordt gescrold.
In dit artikel lees je hoe je:
Problemen met je animatie?
Volg onze stappen om ervoor te zorgen dat ze zoals verwacht werken op je live website.

Animatie toevoegen aan een element

Maak je website dynamisch en boeiend door een animatie aan je elementen toe te voegen. Elke animatie heeft zijn eigen effect, zodat je ze kunt mixen met verschillende elementen en een onuitwisbare indruk bij je bezoekers kunt achterlaten.
Tip:
Je kunt animatie aan een groep elementen toevoegen door de groep te selecteren en op het Animatie-pictogramte klikken.

Om animatie toe te voegen:

  1. Klik op het relevante element in de Editor.
  2. Klik op het Animatie-pictogram.
  3. Selecteer een animatie uit de beschikbare opties.
    • Entree: De animatie wordt één keer afgespeeld wanneer het geselecteerde element op het scherm verschijnt.
    • Loop: De animatie wordt continu afgespeeld.
    • Scrollen: De animatie wordt afgespeeld wanneer het element in beeld komt. 
Een gif die een aantal verschillende animaties laat zien die in een lus kunnen worden weergegeven.
Let op:
Koptekstelementen worden niet geanimeerd wanneer de bezoeker tussen websitepagina's wisselt. 

Een animatie aanpassen

Nadat je animatie aan een element hebt toegevoegd, kun je het aanpassen zodat het zich gedraagt zoals jij dat wilt en past bij het gevoel van je website.
Pas instellingen aan zoals de sterkte, richting en vertraging om een impact te creëren en je bezoekers te betrekken.
Let op:
De beschikbare aanpassingsopties zijn afhankelijk van de animatie die je kiest.

Om de animatie aan te passen:

  1. Klik op het relevante element in de Editor.
  2. Klik op het Animatie-pictogram.
  3. Klik op Aanpassen en gebruik de opties om je animatie aan te passen: 
    • Sterkte: Klik op de dropdown om te selecteren hoe sterk de animatie is wanneer deze wordt afgespeeld.
    • Richting: Selecteer vanuit welke richting de animatie komt (bijvoorbeeld: met de klok mee, van rechts).
    • Afstand: Gebruik de schuifregelaar om de afstand tussen het begin- en eindpunt van het effect te wijzigen.
    • Duur: Gebruik de schuifregelaar om aan te passen hoelang de animatie moet worden afgespeeld.
    • Vertraging: Gebruik de schuifregelaar om de vertraging tussen het laden van de pagina en het begin van de animatie te vergroten of te verkleinen.
    • Animatietype: Kies uit in, uit of continu animatietype tijdens het scrollen. 
    • Bewegingsstijl: Selecteer de intensiteit van de beweging, zoals zacht of matig.
Een screenshot van de instellingen voor de flip-animatie. Verschillende instellingen weergeven, zoals de richting en duur van de animatie.

Animaties toevoegen aan je mobiele website

Je kunt niet alleen animaties toevoegen aan elementen op je desktopsite, maar ze ook toevoegen aan je mobiele website, zodat je bezoekers een goede browse-ervaring hebben vanaf al hun apparaten.
Animaties voor mobiel zijn speciaal ontworpen voor kleinere schermresoluties en -formaten, dus je hoeft je geen zorgen te maken over de hoeveelheid ruimte. 
Let op:
Animatie-effecten die je op desktop toevoegt, worden niet overgedragen naar je mobiele website, omdat ze zijn geoptimaliseerd voor verschillende schermformaten. Als je wilt dat een element ook op mobiel wordt geanimeerd, volg je de onderstaande stappen.

Om animatie toe te voegen op mobiel:

  1. Ga naar je mobiele Editor.
  2. Klik op het relevante element.
  3. Klik op het Animatie-pictogram.
  4. Selecteer een animatie uit de beschikbare opties.
Een animatie kiezen voor een element in de mobiele Editor
Belangrijke opmerking voor Velo:
Als je Velo (code) gebruikt om een element te verbergen of weer te geven, moet de animatie ervan ook via Velo worden ingesteld. 

Vond je dit artikel nuttig?

|