Een citaat presenteren à la Teletype III
De tekst hierboven wordt — na een korte pauze — karakter voor karakter op het scherm gezet, op de manier zoals dat vroeger gebeurde door een schrijfmachine. Als de tekst helemaal is uitgeschreven, verschijnt er een lijn in de linker marge. Die begint halverwege de tekst en wordt steeds langer.
Op deze pagina wordt getoond hoe je zoiets aan kunt pakken. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door de rubriek "Dagelijkse Gebedsinspiratie" in de Bible-app van YouVersion voor Android. Voor deze pagina heb ik iets nagebouwd wat er op lijkt.
- De code bestaat uit HTML, JavaScript (in de file script.js) en CSS (in de file styles.css). De code kan
natuurlijk ook in het document staan.
- De werking van het script
- Als de pagina is geladen begint een wachttijd van 2 seconden.
- Daarna wordt met tussenpozen van 0.05 seconde een karakter aan de tekst op het scherm toegevoegd.
- Als het uitschrijven van de tekst klaar is verschijnt er een lijn in de linker marge. Die lijn begint halverwege en groeit naar boven en naar beneden.
- Als het laatste karakter is verwerkt, stopt het script.
- De tekst staat regel voor regel in een array van strings, regeleinden worden door het script toegevoegd.
- Het schrijven van de tekst en de beweging van de lijn zijn gescheiden processen. De tekst wordt geregeld door JavaScript,
de lijn door CSS.
- Dit is een uitbreiding van item nr. 128: Een citaat presenteren à
la Teletype. Alleen de code van de lijn wordt besproken.
- HTML
- De HTML bestaat uit een <div>-tag met de klasse wrapper, die dient om de lijn en de tekst bij elkaar te houden en om het geheel in de regel te positioneren.
- Binnen wrapper bevinden zich twee <div>-tags, met id container (voor de tekst) respectievelijk klasse lijn (voor de lijn).
- Geen van deze tags bevat content.
- CSS
- De CSS van wrapper houdt de tekst en de lijn bij elkaar en plaatst de samenstelling in het midden van de regel via margin:0 auto. De breedte is 420px en de hoogte is 210px, dat is voldoende ruimte voor de tekst en de lijn.
- De CSS van container is vrijwel gelijk aan die in item nr. 128, behalve de afmetingen. Die zijn gereduceerd van 400px breed naar 360px, en van 200px hoog naar 170px.
- De lijn begint met een breedte en een hoogte van eveneens 10px. De afrondingsstraal is gelijk aan de helft van de
breedte van de lijn.
De linker bovenhoek van de lijn is gepositioneerd op de helft van de hoogte van de tekst. - Bij het laden van de pagina is de lijn onzichtbaar. Dat is bereikt door de lijn de kleur transparent te geven.
- Zodra de tekst is uitgeschreven (na 11 seconden) wordt de lijn wit gemaakt, waarna de lengte (height) van de lijn
in 1.5 seconde wordt vergroot van 10px naar 180 px. De linker bovenhoek van de lijn wordt daarbij 100px naar boven verplaatst
met transform:translateY(-100px). Hierdoor lijkt het alsof de lijn vanuit het midden naar boven en naar beneden steeds
langer wordt.
- JavaScript
- Het JavaScript voor de tekst is exact gelijk aan dat uit het hiervoor genoemde item 128.
- De lijn gebruikt geen JavaScript.
- Toepassen in je eigen site
- Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Vervang de tekst in het JavaScript door je eigen tekst. Laat het JavaScript verder ongemoeid.
- Pas afmetingen aan. De wrapper en de container moeten even hoog zijn. De !wrapper moet breder zijn dan de container. De tekst moet in de container passen. Dat controleer je het eenvoudigste door er tijdelijk een border van 1px breed omheen te zetten.
- Pas de opmaak van de container en de lijn aan naar je eigen smaak. Als je het lettertype vervangt door een niet-webfont, kun je het hele blok @font-face uit de CSS verwijderen.
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>).
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen.)
<div class="wrapper">
<div class="lijn"></div>
<div id="container"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb751.zip, 1398 bytes.
