Kinetic Text voor Divi 5
Kinetic Text is een WordPress-plugin die we bij Waligoo zelf ontwikkeld hebben: 77 toegankelijke tekstanimaties, rechtstreeks in de Divi 5 Visual Builder. Geen losse scripts of trage animatiebibliotheken nodig, gewoon een module toevoegen of een CSS-klasse plakken, en je tekst leeft.
Waarom we deze plugin gebouwd hebben
Toen we zelf op zoek gingen naar een degelijke manier om tekst te animeren in Divi 5, botsten we op een gat in de markt. De bestaande opties waren gebouwd voor het oude, shortcode-gebaseerde Divi, werkten niet of nauwelijks met de nieuwe, blok-gebaseerde Visual Builder, waren zwaar voor de laadtijd, of hielden geen rekening met toegankelijkheid. In plaats van te schipperen met iets dat niet paste, hebben we die oplossing zelf gebouwd van nul, specifiek voor Divi 5.
77 effecten, negen categorieën
Kinetic Text voegt een native Kinetic Text-module toe aan de Divi 5 Visual Builder, en laat je bovendien elke bestaande Divi 5-module (Heading, Tekst, Knop…) animeren door gewoon een CSS-klasse toe te voegen. In totaal zitten er 77 effecten in, verdeeld over negen categorieën:
- Hele tekst (21): Fade In/Up/Down/Left/Right, Zoom In/Out, Flip, Blur In, Bounce In, Elastic In, Rotate In, Skew In, Drop In, Swing In, Tracking In, Focus In, Rise From Mask, Curtain Reveal en meer.
- Letters (17): letter voor letter laten verschijnen, van eenvoudige fade tot typewriter- en scramble/decode-effecten.
- Woorden (10): fade, slide, blur, zoom, flip, rotate, bounce en drop, telkens per woord.
- Regels (3): regels worden automatisch gedetecteerd en opnieuw gemeten wanneer het scherm van grootte verandert.
- Roterende woorden (10): ideaal voor een zin als “We bouwen websites / webshops / merken” die blijft doorlopen.
- Handgetekend (7): onderlijning, zigzag, golflijn, cirkel en meer getekend in echte pixels, zodat lijnen nooit uitrekken.
- Loops (5): Gradient Flow, Shine Sweep, Glitch, Neon Glow, Float.
- Scroll-gekoppeld (2): letters of woorden die verschijnen naarmate je scrollt.
- Highlights (2): Highlight Sweep en Underline Draw.
Volledig instelbaar
Elk effect is te combineren met instellingen voor start (bij scrollen in beeld, bij laden, bij hover of bij klik), herhaling (eenmalig, opnieuw of in lus), duur, vertraging, stagger, easing, willekeurige volgorde, apparaatlimieten, wachttijd voor roterende woorden, type- en verwijdersnelheid, cursorstijl, herhalingsaantal, pauze bij hover, tot drie effectkleuren inclusief Divi's eigen globale kleuren - en lijndikte. Lettertype, kleur, grootte, spatiëring en achtergrond blijven gewoon werken zoals je van Divi gewend bent.
Toegankelijk vanaf de basis
Een animatie mag nooit ten koste gaan van toegankelijkheid. Bezoekers die “verminderde beweging” instellen in hun besturingssysteem krijgen gewoon statische tekst. Schermlezers horen de volledige zin één keer; de letter-voor-letter-opbouw blijft voor hen verborgen, en roterende woorden worden voorgelezen als een lijst. Links in tekst blijven klikbaar en met het toetsenbord bereikbaar, tekst wordt echt als HTML weggeschreven zodat zoekmachines ze gewoon lezen, en het glitch-effect is bewust kort en contrastarm gehouden om veilig te blijven voor mensen met epilepsie. Rechts-naar-links-talen en complexe schriften zoals Arabisch, Hebreeuws, Hindi of Thai krijgen automatisch een effect dat de letters aan elkaar houdt.
Deze Plugin is veiligDeze Plugin is licht
Elke instelling wordt gecontroleerd tegen een lijst van toegestane waarden of begrensd tot een geldig bereik, zowel in PHP als in JavaScript. Tekst gaat door de ingebouwde WordPress-filtering, scripts en stijlen worden verwijderd, en elk attribuut wordt correct geëscaped. Er komen geen databasetabellen, opties of tracking bij kijken, dus er blijft niets achter mocht je de plugin ooit verwijderen. En omdat alles draait op één klein stijlbestand en één op zichzelf staand, uitgesteld ingeladen script dat bovendien alleen laadt op pagina's die een animatie gebruiken blijft de impact op je laadtijd minimaal.
Zelf aan de slag met Kinetic Text?
Kinetic Text for Divi 5 is niet los verkrijgbaar via de WordPress-pluginmarkt, maar wel open beschikbaar op aanvraag. Neem contact op met Waligoo en we bezorgen je de plugin.