Een citaat presenteren à la Teletype II
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 voor ongeveer de helft is uitgeschreven, stuitert er van links een verticale balk naar binnen.
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 ca. 7½ seconde bezig schuift er van links een verticale lijn naar binnen, die een paar keer tegen de linker marge stuitert en dan tot rust komt. Het schrijven van de tekst gaat ondertussen gewoon door.
- 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 en de aanpassingen in de code van de Teletype-tekst worden 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 500px om ruimte te maken voor beweging van de lijn. De hoogte is 240px, dat is gelijk aan de hoogte van container plus 2 maal de (verticale) padding van container.
- De CSS van container is vrijwel gelijk aan die in item nr. 128, behalve de breedte. Die is gereduceerd van 400px naar 360px, om wat meer ruimte te maken voor de lijn.
- De lijn is 10px breed en 180px hoog. Die afmetingen zijn bepaald op basis van de effectieve hoogte van de tekst op het scherm. De afrondingsstraal is gelijk aan de helft van de breedte van de lijn.
- Bij het laden van de pagina is de lijn onzichtbaar. Dat is bereikt door de lijn 1½ maal de breedte van de lijn links van de wrapper te plaatsen en wrapper de eigenschap overflow:hidden te geven.
- De stuiterende beweging is afgeleid van het item Animeren met @keyframes II:
Stuiterende bal. Voor dit item is de verticale beweging omgezet in een horizontale door translateY door translateX
en de grootte van de amplitude aan te passen.
- 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: voorb742.zip, 1433 bytes.
