Een citaat presenteren à la Teletype

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.

Teletype Een Teletype is een schrijvende computer "monitor". Vandaag de dag zie je ze nauwelijks meer, maar in het begin van het computertijdperk werden ze veel gebruikt. Monitoren waren toen log en duur.
Een Teletype is het beste te vergelijken met een (elektrische) schrijfmachine (bestaan nog wel maar zijn moeilijk te krijgen), gekoppeld aan een computer. Een andere mogelijke vergelijking is een telex of een naaldenprinter.
Als deze apparaten hebben twee dingen gemeen: Het is verouderde technologie én ze typen karakter voor karakter op papier. Door die laatste eigenschap te simuleren met HTML en JavaScript, kun je leuke effecten bereiken, vooral om citaten en oneliners weer te geven op je website.

Op deze pagina wordt getoond hoe je zoiets aan kunt pakken. De code kun je downloaden om zelf te gebruiken.

Gebruik:

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>.)

<style>
@font-face {
  font-family: 'px437_amstradpc1512-2yregular';
  src: url('../html-5/fonts/px437_amstradpc1512-2y-webfont.woff2') format('woff2'),
       url('../html-5/fonts/px437_amstradpc1512-2y-webfont.woff') format('woff');
       url('../html-5/fonts/px437_amstradpc1512-2y-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#container {
  position:relative;
  top:0; left:0;
  margin:0 auto;
  width:400px; height:200px;
  padding:20px;
  font-family:'px437_amstradpc1512-2yregular', sans-serif;
  font-size:11pt; line-height:30px;
  color:green;
}
</style>
<script>
const citaat = ["Japanse wijsheid:"," ","Als het niet van jou is, neem het dan niet.",
      "Als het niet goed is, doe het dan niet.", "Als het niet waar is, zeg het dan niet.",
      "Als je het niet weet, zwijg dan."]
const regels = citaat.length;
let verwijzing, karakters, myInterval, rij, kolom;
function toonCitaat() {
  myInterval = setInterval(toonKarakter,50);
}
function toonKarakter() {
  verwijzing.innerHTML += citaat[rij].charAt(kolom);
  if (kolom >= karakters) {
    verwijzing.innerHTML += "<br>";
    rij++;
    if (rij >= regels) {
      clearInterval(myInterval);
    } else {
      kolom = 0;
      karakters = citaat[rij].length;
    }
  } else {
    kolom++;
  }
}
function initCitaat() {
  verwijzing = document.getElementById('container');
  verwijzing.innerHTML = "";
  rij = 0; kolom = 0;
  karakters = citaat[rij].length;
  setTimeout(toonCitaat,2000);
}
window.onload = initCitaat;
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen.)

<div id="container"></div>

Downloaden:
 
Druk op de knop: Download deze code  File: voorb128.zip, 883 bytes.

 
terug

html-128; Laatste wijziging: 28 april 2024