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.

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.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code van het voorbeeld is gemaakt met HTML, CSS en JavaScript.
   
• HTML
• De HTML bestaat uit een <div>-tag met daarbinnen nog twee <div>-tags.
• De buitenste tag heeft de id="wrapper". Deze dient om de tekst en de onderstreping bij elkaar te houden, en om het geheel te positioneren in het document. Het wordt ook gebruikt voor het opvangen van het mouseover-event.
• De eerste <div> binnen de wrapper heeft id="deTekst". Deze bevat de tekst.
• De tweede <div> binnen de wrapper heeft id="deLijn". Deze bevat de onderstreping.
• Bij de drie <div>'s is voor id's gekozen in plaats van classes. Dat maakt het eenvoudiger de elementen te benaderen met JavaScript.
   
• CSS
• De CSS maakt stelt eerst de afmetingen voor de wrapper in. Een beetje breder dan, en een beetje hoger dan de tekst en de onderstreping. Hier volstaat 270 × 40 px.
• De wrapper wordt horizontaal gecentreerd met de code margin:0 auto 0 auto.
• Voor deTekst wordt het font "Kranky" gebruikt. Dat is een webfont, dat wordt opgehaald met de font-API van Google. Zie het item Niet-standaard fonts gebruiken uit externe bronnen voor meer informatie over dat onderwerp.
  Er is hier voor een webfont gekozen zodat het font (vrijwel) altijd beschikbaar is. Dat voorkomt dat de lengte van de onderstreping uit de pas gaat lopen met de tekst.
• De breedte van deTekst is 260 px. Dat is bepaald door de tekst op het scherm te zetten in de gewenste zwaarte (bold) en grootte (200%), en daarna met een scherm-liniaal de breedte te meten .
• De deTekst wordt binnen de wrapper gecentreerd met text-align:center é margin:0 auto 0 auto. Deze twee zijn allebei nodig, anders komt de tekst niet goed gecentreerd op het scherm. Vermoedelijk komt dit doordat de wrapper breder is dan deTekst.
• Alle overgangen (transitions) duren 1 seconde en gebruiken de (standaard) ease.
• De deLijn wordt binnen de wrapper gecentreerd met margin:0 auto 0 auto. De breedte is even groot als die van deTekst. De streep is 2 px breed. Dat stel je in met height.
• Ook hier duren transitions) 1 seconde en gebruiken ze de (standaard) ease.
   
• JavaScript
• Het JavaScript wordt gebruikt om de mouseover- en mouseout-events af te vangen en de animaties te starten. De animaties zelf worden door CSS gedaan.
• Als eerste worden er drie variabelen gedeclareerd: wrapper, tekst en lijn. Zodra de pagina is geladen worden daar verwijzingen in gezet naar de div's met id="wrapper", id="deTekst" en id="deLijn".
• Aan wrapper worden event-handlers gekoppeld voor mouseover en mouseout. Dat zijn de functions doEffect() en undoEffect().
• De function doEffect() zet de width van lijn (deLijn) op nul, en zet de color van tekst (deTekst) op "#d00".
• De function undoEffect() zet de width van lijn (deLijn) op "260px", en zet de color van tekst (deTekst) op "maroon".
   
• 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.
• Pas de tekst in de <div id="deTekst"> aan aan je eigen behoefte. Het kan nodig zijn de width van wrapper, deTekst en deLijn te verhogen of te verlagen. Dit betekent dat ook de code van de JavaScript-function undoEffect() moet worden aangepast.
• Verander de kleuren van de tekst in deTekst, doEffect() en in undoEffect().
• Verander de kleuren van de lijn in deLijn, doEffect() en in undoEffect().
   
• Tenslotte
• Dit is heel geschikt als opmaak voor hyperlinks.
• Er is een nadeel: Als de browser een ander font gebruikt voor deTekst (bijvoorbeeld omdat het font niet beschikbaar is, zal de lengte van deLijn niet meer kloppen.

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 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:  File: voorb604.zip, 696 bytes.