Animaties instellen

Slidde.co stelt je in staat om eenvoudig standaard CSS keyframe-animaties toe te passen op je web-elementen. Hier is een stapsgewijze handleiding om je op weg te helpen.

de Animatie-optie in de zijbalk

1. Selecteer een Element: Klik op een willekeurig element op je pagina.
2. Open de Animatie Modal: In de rechter zijbalk, klik op de Animaties tabknop, je vindt de Animatie optie. Klik erop om een modaal venster te openen.
3. Begin met Presets: We raden aan om te beginnen met preset-animaties, die je later kunt aanpassen aan je behoeften. Je kunt op de preset-knoppen klikken om te vervangen door een preset. Als je op het pluspictogram in de knop klikt, wordt de preset toegevoegd aan de huidige animatie.

Animaties aanpassen

De animatiemodal vereenvoudigt het proces van het instellen van CSS keyframe-animaties in een low-code interface, waardoor het toegankelijk is, zelfs als je niet bekend bent met coderen.

Keyframe-animaties zijn waar je de css-eigenschappen voor bepaalde percentages definieert. En de browser regelt de overgang voor je.

Bijvoorbeeld, als je keyframes hebt zoals deze met een duur van 4 seconden.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

Het object zal 20px naar beneden bewegen gedurende 2 seconden, en vervolgens 20px omhoog terug naar zijn oorspronkelijke positie gedurende 2 seconden.

Als je problemen ondervindt of meer wilt leren over keyframe-animaties:

• Zoek Online: Google je specifieke vragen; er zijn veel voorbeelden en bronnen beschikbaar.
• CSS Keyframes Tutorial: Raadpleeg de officiële CSS keyframes gids op MDN voor uitgebreide informatie.

Trigger

Dit veld bepaalt wanneer de animatie wordt afgespeeld.

• Element getoond: Dit is de standaardoptie. De animatie wordt geactiveerd wanneer het element in beeld wordt gescrold of de bijbehorende sectie wordt getoond Hash sectie
• Element getoond (elke keer opnieuw afspelen): Hetzelfde als hierboven, behalve dat de animatie elke keer wordt herhaald wanneer het element wordt getoond.
• Pagina geladen: De animatie wordt geactiveerd wanneer de pagina is geladen.

Doel(en)

Meestal hoef je dit niet in te stellen. De standaardwaarde is &, wat betekent het rootelement.

Er zijn echter enkele gevallen waarin je het moet instellen.

• Om het Geavanceerde achtergrond element te animeren, kun je Doel(en) instellen op Eerste kindelement, aangezien het Geavanceerde achtergrond element altijd het eerste kind van het rootelement zal zijn.

• Om een vertraagde vertraging toe te passen op alle kindelementen. Lees verder in de sectie Vertraging & vertraagde vertraging voor meer details.

Vertraging & vertraagde vertraging

Als je Vertraging instelt op 1000ms, zal de animatie worden afgespeeld na een wachttijd van 1000ms.

Als je Verspringen instelt op 50ms en doelen instelt op Alle directe kindelement(en). De animatie zal worden toegepast op elk van de directe kindelementen, en wachten op

• eerste element, 1000ms,
• tweede element, 1050ms,
• derde element, 1100ms,
• ...

Tekstvertraging

Dit werkt voor een Tekst component.

Als je Verspringen instelt en doelen instelt op Alle letter(s). Het vertragingseffect zal worden toegepast op elke letter.

Gebruik css animation eigenschap

Een eenvoudige css animatie is altijd beschikbaar voor alle elementen in CSS. Maar je moet mogelijk Uitschakelen in canvas inschakelen voor die specifieke css-regel om gemakkelijker te kunnen bewerken in de editor.