Typewriter
Typt tekst letter voor letter uit met een knipperende cursor; loopt optioneel door meerdere zinnen.
Geef leven aan een kop of slogan door de tekst als een typemachine uit te typen. Met loop wisselt 'ie tussen meerdere zinnen.
Toepassingen per site-type
Een webshop gebruikt Typewriter soms in de Hero om afwisselend productcategorieën te tonen, bijvoorbeeld 'Schoenen', 'Tassen' en 'Accessoires' die na elkaar getypt worden boven een zoekbalk. Een portfolio-site zet dit block spaarzaam in om vakgebieden te tonen, zoals 'Fotografie', 'Video' en 'Retouche' na elkaar in de introtekst. Bij een zakelijke dienstverlener werkt Typewriter goed om verschillende doelgroepen aan te spreken binnen dezelfde titel, bijvoorbeeld 'Voor ondernemers', 'Voor zzp'ers' en 'Voor stichtingen' die afwisselen boven een advieswebsite.
Een veelgemaakte fout is te veel of te lange zinnen in de rotatie zetten: bij meer dan vier of vijf zinnen duurt het te lang voordat een bezoeker alle varianten heeft gezien, en lange zinnen typen traag genoeg uit om ongeduldig te worden. Houd de zinnen kort — enkele woorden tot een korte zinsnede. Een tweede valkuil is Typewriter gebruiken voor belangrijke, statische informatie zoals een adres of telefoonnummer: die tekst moet altijd direct leesbaar zijn, niet pas na een paar seconden getypt worden.
Dit block wordt vrijwel altijd gecombineerd met een Hero, waarbij de titel vaststaat en Typewriter in de ondertitel de wisselende kernwoorden toont. Gebruik het niet in combinatie met andere bewegende elementen vlak ernaast, zoals een GsapCounter die tegelijk optelt: te veel gelijktijdige beweging in beeld leidt af in plaats van dat het de aandacht trekt.
Voor toegankelijkheid geldt dat de knipperende cursor en het typ-effect voor sommige bezoekers afleidend of hinderlijk kunnen zijn; respecteer daarom de voorkeur voor verminderde beweging en overweeg de tekst statisch te tonen wanneer die voorkeur aan staat.
Gebruik dit block in een hero-sectie of slogan om in enkele kernwoorden te laten zien wat een product allemaal is, zonder een lange zin te hoeven schrijven. Combineer het bijvoorbeeld met een Hero: de titel staat vast, terwijl de Typewriter erachter wisselt tussen 'Snel', 'Flexibel' en 'Headless'.
Gebruik het spaarzaam: op een pagina met veel tekst werkt de knipperende cursor afleidend, maar bovenaan een landingspagina trekt het juist de aandacht naar het belangrijkste kernwoord.
<Typewriter loop phrases='Snel|Flexibel|Headless' />