Wix Editor: Een animatie toevoegen en aanpassen
In dit artikel
- Animatie toevoegen aan een element
- Een animatie aanpassen
- Animaties toevoegen aan je mobiele website
Gebruik animaties om je website tot leven te brengen. We bieden verschillende animaties voor elk aspect van je ontwerp: entree-, scroll-, loop- en zelfs muiseffecten.
Je kunt de animatie aanpassen zodat deze precies is wat je voor ogen had. Pas bijvoorbeeld de afstand, duur, vertraging en nog veel meer aan.
Onze mobiele animaties zijn ontworpen om op kleinere schermen te passen, zodat je je bezoekers op elk apparaat kunt imponeren.
Je kunt verschillende animaties en effecten op hetzelfde element toepassen.
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-pictogram
te klikken.
te klikken.
Om animatie toe te voegen:
- Klik op het relevante element in de editor.
- Klik op het Animatie-pictogram .
- 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.
- Beweging en effecten: De animatie begint te bewegen wanneer de cursor van de bezoeker het element aanwijst.
Let op:
Elementen in je koptekst worden slechts één keer geanimeerd, tijdens het eerste bezoek aan de pagina.
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:
- Klik op het relevante element in de editor.
- Klik op het Animatie-pictogram .
- 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.
- Snelheid: Sleep de schuifregelaar om de snelheid van het effect te wijzigen. Hoe lager het getal, hoe sneller het effect.
- Bewegingsas: Bepaal of het element horizontaal, verticaal of op beide assen beweegt.
- Animatietype: Kies uit in, uit of continu animatietype tijdens het scrollen.
- Draaien: Kies het referentiepunt vanwaaruit het element begint te bewegen.
- Beweging: Selecteer de intensiteit van de beweging, zoals voorzichtig of matig.
Toegankelijkheidstip:
Als dit element alleen decoratief is, wat betekent dat het geen belangrijke informatie voor schermlezers bevat, schakel je het
Decoratief-selectievakje in in het
Instellingen-paneel
.
.
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:
- Ga naar je mobiele editor.
- Klik op het relevante element.
- Klik op het Animatie-pictogram .
- Selecteer een animatie uit de beschikbare opties.
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.