Bijdragers

Tico Vermeer
Development Stagiair

Wat is Get Streamed

Get Streamed is een dochteronderneming van filmbedrijf Million Miles uit Deventer. In plaats van filmproductie ontfermt Get Streamed zich echter over 'livestreams'. Dankzij de services van de partij uit Deventer zijn online evenementen, talkshows, concerten, of colleges live te volgen.

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. 

HTML script

CSS script

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'.

JavaScript
Portret van chef Egon van Hoof

Wij hebben voor ons bedrijf Get Streamed erg prettig samengewerkt met Groove Digital voor de ontwikkeling van onze website. De duidelijke communicatie, het snelle schakelen en het meedenken vanuit Groove Digital maken dat wij prettig terugkijken op de samenwerking met een mooi resultaat!

Sjoerd Hageman
Co-founder, Get Streamed