Naar inhoud
FFrosthaven Lab

06 — 20 varianten

Tekst-effecten

Typografie in beweging: typewriter, scramble, split-reveal, scroll velocity, tickers en gemaskeerde tekst.

Typewriter

jshero

Websites voor

Roterende beroepsgroepen in één zin. Fijn om één site voor meerdere doelgroepen te laten spreken; zet de statische variant in de HTML voor SEO.

Scramble / decrypt

jstech

FROSTHAVEN

Letters vallen op hun plaats zodra de tekst in beeld komt. Signatuur-effect voor tech en security; nooit op een zin die gelezen moet worden.

Word rotate

jshero

Vooralbetrouwbaarsnelmeertaligvindbaar

Woord wisselt verticaal in een vast venster. Zet een vaste breedte op het venster, anders springt de rest van de zin heen en weer.

Split-char reveal

jsscroll

Letter voor letter

Elke letter komt met een eigen vertraging omhoog. De klassieker uit awardsites. Wrap in één element met aria-label zodat screenreaders de zin heel horen.

Blur-in

jsscroll

Zachte binnenkomst

Zelfde stagger maar met blur in plaats van beweging. Rustiger en duurder ogend; mijn voorkeur boven de omhoogschuivende variant.

Shiny sweep

css
Premium onderhoud

Lichtstreep loopt door de tekst via background-clip. Werkt alleen als de tekst dik genoeg is; onder 600 gewicht zie je het niet.

Aurora gradient

css
Kleur in beweging

Kleurverloop dat langzaam door de tekst schuift. Goed voor één woord in een kop; een hele alinea zo opmaken wordt onleesbaar.

Scroll velocity marquee

cssbold
Property care · Marina Alta · Property care · Marina Alta ·

Enorme letters die horizontaal doorlopen. Vult een lege sectie tussen twee blokken; houd het bij één woord of korte claim.

Scroll reveal per woord

jsscroll

Elke zin verschijnt woord voor woord terwijl je door de pagina scrolt

Woorden lichten op naarmate je scrolt. Sterk voor een manifest of missie-alinea. Scroll de pagina om het te zien.

Number ticker

jsstats
0+

objecten

0 jr

ervaring

Telt op zodra het cijfer in beeld komt. Gebruik tabular-nums, anders springt de breedte per cijfer. Easing op cubic-out voelt af.

Highlight marker

csshover

Wij leveren echt vakwerk en geen beloftes.

Markeerstift die uitgroeit achter een woord. Trekt het oog naar precies één begrip in een alinea; meer dan twee per pagina en het werkt niet meer.

Variabel gewicht

csshover

GEWICHT

Letterdikte reageert op hover via font-variation-settings. Vereist een variable font; met een statische webfont gebeurt er niets.

3D flip

csshover

Beschikbaar vandaagnu meteen

Woord draait om zijn as en toont een tweede boodschap. Leuk voor een claim met een knipoog; vraagt om preserve-3d op de wrapper.

Beeld als tekstvulling

cssbold

COSTA

De letters tonen de foto erachter. Zet altijd een fallback-kleur op de tekst voor het geval background-clip niet wordt ondersteund.

Sparkles

cssspeels
Handgemaakt

Kleine glinsteringen rond een woord. Past bij bruidsmode, ijssalon, kinderfeest. Bij een aannemer werkt het averechts.

Line shadow

cssretro
FIESTAFIESTA

Gestreepte slagschaduw achter de letters. Retro-poster gevoel; mooi voor festivals, bars en foodtrucks.

Char hover lift

csshover

RAAK MIJ AAN

Elke letter springt los omhoog onder de cursor. Goedkoop te bouwen, duur effect. Werkt alleen bij korte woorden.

Underline draw

csslink
Over onsWerkwijzeContact

Streep groeit vanaf links. De enige link-hover die je écht nodig hebt; gebruik scale-x met transform-origin, niet width, dat scheelt reflow.

Label swap

csshover
DienstenDienstenProjectenProjectenContactContact

Tekst rolt omhoog en een kopie neemt de plek in. Scherp detail voor menu-items en knoplabels; vergt overflow-hidden op een vaste hoogte.

Outline / stroke type

cssbold

BOUWEN

ZONDER GEDOE

Alleen contour, geen vulling. Werkt als tweede regel onder een gevulde kop; contrast is laag, dus nooit voor leestekst.