Tekst tonen met een typemachine-effect
Hieronder verschijnt een tekst. Dat gaat letter voor letter, alsof er iemand zit te typen. Op deze pagina wordt uitgelegd
hoe je dat doet.
Vernieuw de pagina om het effect nog een keer te zien.
Dit is geen typemachine.
Dit effect is zeer geschikt om de aandacht te trekken van de bezoekers van je webpagina, bijvoorbeeld in de aankondiging van een evenement. He is helemaal gemaakt met HTML en CSS. Er komt geen JavaScript bij kijken.
Inspiratie: Dit is gebaseerd op code uit een project dat ik vond op CodePen.io.
De code van het voorbeeld staat onderaan deze pagina. Je kunt hem ook downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Gebruiken in je eigen site.
- De werking van het script
- De HTML bestaat uit een tag <div id="wrapper"> met daarbinnen een <p>-tag met één regel tekst.
- De wrapper wordt alleen gebruikt om de zwarte achtergrond te maken en het geheel op het in het document te positioneren.
- Voor de <p>-tag binnen de wrapper is aparte CSS gemaakt. Die zorgt voor de kleur en het font van de
letters en de positionering binnen de wrapper, alsmede voor de animatie.
- De regel is eerst onzichtbaar, maar wordt stapsgewijs "onthuld", met één karakter per stap. Daarvoor wordt animation ingezet, in combinatie met @keyframes.
- De animation bevat twee animaties, te weten typing en blink-caret.
- typing laat de breedte van de tekstregel in 10 seconden oplopen van 0ch tot 24ch. Om te zorgen dat een deel van de tekst onzichtbaar blijft, is overflow:hidden gebruikt. Met white-space:nowrap wordt gezorgd dat de tekst op één regel blijft staan.
- blink-caret zorgt voor de knipperende cursor. Die wordt gemaakt met border-right. Elke 0.5 seconde wordt de kleur transparent gemaakt, daarna is het weer de ingestelde kleur (hier: lime).
- Het aantal stappen is gelijk aan het aantal karakters in de tekst.
- De breedte van het hele tekst wordt opgegeven in ch, dat zijn letter-breedtes inclusief witruimte tussen de letters.
- Er kan alleen een monospaced font worden gebruikt, omdat daar alle letters even breed zijn. Het hier gebruikte
"Courier New" geeft mijns inziens de mooiste resultaten. De letters moeten flink groot zijn.
- Gebruiken in je eigen site
- Neem de code over zoals hieronder is aangegeven. De opmaak van de regel kun je aanpassen naar je eigen smaak en behoefte.
- Je bent vrij in de keuze van de kleur van de achtergrond en de letters. Voor de achtergrond kun je ook transparent gebruiken.
- Als je een ander lettertype wilt toepassen, moet dat monospaced zijn. In Google-fonts is er wel wat te vinden.
- Het is mogelijk de verticale line-cursor te veranderen in een massief blok. Zet daarvoor de border-right op een breedte van 1em (staat nu op 0.1em).
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.wrapper {
width:80%; height:60px;
margin:20px auto;
background:#333;
}
.wrapper p {
color:lime;
font:bold 200% "Courier New", monospace;
padding:0.5em 0 0 1em;
border-right:0.1em solid lime;
white-space:nowrap;
overflow:hidden;
width:24ch;
animation:typing 10s steps(24, end),
blink-caret .5s step-end infinite alternate;
}
@keyframes typing { from { width:0; } }
@keyframes blink-caret { 50% { border-color:transparent; } }
</style>
(Zet dit in de <BODY> op de plaats waar Het effect moet verschijnen).
<div class="wrapper">
<p>Dit is geen typemachine.</p>
</div>
Downloaden:
Druk op de knop:
File: voorb048.zip, 590 bytes.
