Typewriter animation

Wat was de klantvraag?

Onze partner Get Streamed wilde voor hun homepagina een typemachine effect met een bepaalde stuk tekst. Groove heeft dit voor gemaakt door het gebruiken van HTML, CSS en Javascript.

Hoe zijn we te werk gegaan?

In eerste instantie was het idee om de tekst in een div te plaatsen en die steeds met de breedte van een letter kleiner te maken zodat die niet meer te zien is. Het nadeel van deze techniek is alleen dat niet alle letters even breed zijn in ieder font. Ook bestaat niet ieder woord uit hetzelfde aantal letters. 

Hierom hebben we het met JavaScript gedaan. Waardoor de HTML en CSS simpel zijn gebleven. De link wordt met de HTML, CSS en JavaScript met elkaar gelinkt. Voor de rest alleen een hoofdtekst met daarin een span met de tekst voor het effect. In de CSS zit alleen de stijl van die tekst.

De code moest herbruikbaar zijn, dus hebben we het effect aan elke tekst met de class 'txt-rotate. Deze teksten hebben in de HTML nog twee attributen nodig, dit zijn: 'data-period' en 'data-rotate'. Data-period is de tijd dat er wordt gewacht wanneer de tekst volledig is weergegeven en data-rotate zijn alle teksten die na elkaar verschijnen en verdwijnen. Bij het laden van de pagina halen we deze gegevens in de JavaScript op uit de HTML en gaat hiermee aan het werk. 

‍

Het resultaat

Voor alles in de HTML met de juiste class laat de variabele 'text' uit de JavaScript zien. Deze is gebaseerd op de teksten die zijn ingevuld bij het attribuut 'data-rotate'. Uit dit attribuut haalt alle teksten op en gaat hier vervolgens voor elke letter doorheen. Als een woord bezig is met verschijnen, wordt de volgende letter van de volledige tekst toe aan de tekst die wordt laten zien. Wanneer het woord volledig ia weergegeven worden juist de letters weg gehaald. Alle letters weg zijn, gaan we door naar de volgende tekst uit 'data-rotate'.