Studio Editor: Over animaties
Leestijd 3 minuten
Het opnemen van onze animaties in je ontwerpen kan ze naar een hoger niveau tillen. De Studio Editor biedt 5 verschillende animatietypes, gebaseerd op wanneer je wilt dat ze verschijnen.
Laat animaties verschijnen wanneer bezoekers met de cursor over een element bewegen, klikken of langs een element scrollen. Je kunt ook een entree-animatie toevoegen, voor wanneer het element voor het eerst wordt geladen, of een animatie die continu in een lus herhaalt – allemaal zonder een enkele regel code.
Let op:
De animatiegrootte wordt berekend op basis van je specifieke browser wanneer de pagina voor het eerst wordt geladen. Als je de grootte van het browservenster wijzigt (door de grepen te verslepen), wordt de animatie mogelijk niet correct weergegeven. We raden aan de pagina te vernieuwen voor een optimale weergave.
Entree-animatie
Het toevoegen van een entree-animatie aan een element is een goede manier om de aandacht van bezoekers erop te vestigen. De animatie verschijnt wanneer het element voor het eerst in beeld komt, dus het springt meteen in het oog. Er zijn veel soorten om uit te kiezen en aan te passen aan de exacte behoeften van je klant.
Aanwijs- en klikinteracties
Voeg coole effecten toe die verschijnen wanneer bezoekers een element aanwijzen of erop klikken. Je kunt elementen laten transformeren, verplaatsen of nieuwe inhoud laten onthullen bij het aanwijzen / klikken.
Kies uit een reeks vooraf ontworpen effecten of maak een aangepast effect met jouw exacte specificaties. Beheer de timing, volgorde en de soepelheid om alles samen te brengen en bekijk vervolgens een voorbeeld van het eindresultaat rechtstreeks vanuit de Editor.
Je kunt ook interacties tussen elementen creëren, zodat het aanwijzen of klikken op een element een ander animeert.
In het onderstaande voorbeeld worden de knop en de afbeelding verplaatst als je de alinea aanwijst.
Scroll-animatie
Verhoog de betrokkenheid en creëer interessante effecten met scroll-gestuurde animaties. De voortgang van de animatie is direct gerelateerd aan de scroll-positie. Het gaat vooruit en achteruit terwijl bezoekers op en neer scrollen.
Je kunt ook interacties tussen elementen creëren, waardoor scrollen langs het ene element een ander element animeert.
In het onderstaande voorbeeld zorgt het scrollen van de titel ervoor dat de repeater groter wordt.
Loop-animatie
Creëer een gevoel van beweging in je ontwerp met animaties die herhaaldelijks afspelen. Je kunt een loop-animatie toevoegen aan elk element dat je voor bezoekers wilt laten opvallen — sommige zijn subtieler en andere zijn echte aandachtstrekkers.
Vond je dit artikel nuttig?
|