Ben's Hobbyhoekje -- Geanimeerde onderstreping van tekst II

Geanimeerde onderstreping van tekst II

Hieronder staat de tekst: "Beweeg de muis hier". Als je dat doet ontstaat er een onderstreping die vanuit het midden naar de beide einden gaat. Dat gebeurt ook als je het aantikt.

Beweeg de muis hier

Op deze bladzijde wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
Dit is een variant van het effect dat getoond wordt in het item Geanimeerde onderstreping van tekst I.

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 class="deTekst". Deze bevat de tekst.
De tweede <div> binnen de wrapper heeft id="deLijn". Deze bevat de onderstreping.
Bij twee van 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.
De overgang (transition) duren 1 seconde en gebruikt 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 duurt de transitions) 1 seconde en gebruikt de (standaard) ease.
JavaScript
Het JavaScript wordt gebruikt om de mouseover- en mouseout-events af te vangen en de animaties te starten. De animatie zelf wordt door CSS gedaan.
Als eerste worden er twee variabelen gedeclareerd: wrapper en lijn. Zodra de pagina is geladen worden daar verwijzingen in gezet naar de div's met id="wrapper" 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 "260px".
De function undoEffect() zet de width van lijn (deLijn) op nul.
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 class="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 doEffect() moet worden aangepast.
Verander de kleuren van de tekst in deTekst.
Verander de width van de lijn in deLijn en in doEffect().
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;
}
#deLijn {
bottom: 0;
width: 0;
height: 2px;
background-color: maroon;
margin: 0 auto 0 auto;
transition: all 1s ease;
}
</style>

<script>
var wrapper, lijn;

window.onload = function() {
wrapper = document.getElementById('wrapper');
lijn = document.getElementById('deLijn');

wrapper.onmouseover = doEffect;
wrapper.onmouseout = undoEffect;
}

function doEffect() {
lijn.style.width = "260px";
}
function undoEffect() {
lijn.style.width = 0;
}
</script>

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

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

Downloaden:

Druk op de knop: File: voorb606.zip, 669 bytes.