Geanimeerde onderstreping van tekst

Hieronder staat de tekst: "Beweeg de muis hier". Als je dat doet verandert de kleur en krimpt de onderstreping naar het midden. Dat gebeurt ook als je er op tikt.

Beweeg de muis hier

Op deze bladzijde wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
Ik heb dit effect gevonden op de site van Luke Harrison, een web-developer uit Sheffield, Engeland. Voor deze site heb ik een vergelijkbaar effect nagebouwd.

Gebruik:

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

<link href="https://fonts.googleapis.com/css?family=Kranky"
    rel="stylesheet">
 
<style>
#wrapper {
  width: 270px;
  height: 40px;
  margin: 0 auto 0 auto;
}
#deTekst {
  font-family: 'Kranky', serif;
  top: 0;
  width: 260px;
  text-align: center;
  margin: 0 auto 0 auto;
  font-weight: bold;
  font-size: 200%;
  color: maroon;
  transition: all 1s ease;
}
#deLijn {
  bottom: 0;
  width: 260px;
  height: 2px;
  background-color: maroon;
  margin: 0 auto 0 auto;
  transition: all 1s ease;
}
</style>
 
<script>
var wrapper, tekst, lijn;
 
window.onload = function() {
  wrapper = document.getElementById('wrapper');
  tekst  = document.getElementById('deTekst');
  lijn  = document.getElementById('deLijn');

  wrapper.onmouseover = doEffect;
  wrapper.onmouseout  = undoEffect;
}
 
function doEffect() {
  lijn.style.width = 0;
  tekst.style.color = "#d00"
}
function undoEffect() {
  lijn.style.width = "260px";
  tekst.style.color = "maroon"
}
</script>

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

<div id="wrapper">
  <div id="deTekst">Beweeg de muis hier</div>
  <div id="deLijn"></div>
</div>

Downloaden:
 
Druk op de knop: Download deze code  File: voorb604.zip, 696 bytes.

 
terug

html-604; Laatste wijziging: 30 januari 2023