Doorgestreepte tekst-animaties
In onze taal kan het toevoegen of weglaten van een enkel woord al genoeg zijn om de betekenis van een zin te veranderen. Neem bijvoorbeeld de zin:
Ik ben niet jong
Door het woord niet weg te halen wordt de betekenis van de zin omgedraaid.
Vernieuw
de pagina om het effect nogmaals te zien.
Om het doorhalen van niet te benadrukken, wordt dat gedaan met een animatie, waarbij de streep een andere
kleur heeft dan de tekst.
Op deze bladzijde wordt uitgelegd hoe je dat doet. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Dit is een bewerking van een voorbeeld dat ik zag in Webdesigner Magazine nr. 86 (mei 2016), pag 62 en 63. Voor deze site
heb ik de code aangepast naar de laatste standaarden.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit HTML en CSS. JavaScript komt er niet aan te pas.
- De HTML van het voorbeeld is één regel code, namelijk een <h1>-tag; het doorgestreepte woord staat in een <del>-tag .
- De CSS staat in de file styles.css. Die moet je veranderen voor je eigen toepassing.
- Allereerst wordt de <h1>-tag opgemaakt. De tekst wordt gecentreerd, de lettergrootte en de kleur worden ingesteld.
- Daarna wordt de <del>-tag opgemaakt. Door de tag als inline-block aan te merken weet je zeker dat die altijd in de regel blijft staan. Verder staat de text-decoration op none, waardoor de tekst niet wordt doorgehaald. Bij <del> gebeurt dat (conform de standaard) namelijk wel.
- Met de opmaak van de <del>-tag wordt ook de rode doorhaal-lijn met de bijbehorende animatie gedefinieerd. Dat wordt gedaan met <del:before>, dus vóór dat de <del>-tag zelf wordt opgemaakt
- Merk op dat de <del>-tag zelf position:relative heeft en dat <del:before> position:absolute heeft. Hierdoor is het mogelijk de rode lijn precies op juiste plaats te zetten en te houden.
- De rode lijn is niet een karakter, maar een blok van (in het voorbeeld) height × width = 0.2em × 100%. De achtergrond van het blok is rood.
- Met behulp van margin-top wordt de plaats van de lijn heel precies ingesteld.
- De animatie verloopt via keyframes, met de toepasselijke naam strikethrough. De animatie duurt 2 seconden en verloopt met een constante snelheid. De lijn verschijnt doordat de breedte van het blok verloopt van 0% tot 100%.
- Inbouwen in je eigen site
- Pak de downloadfile uit en bouw de code op zoals hieronder staat aangegeven.
- Wijzig de CSS naar je eigen voorkeuren:
• De kleur en de lettergrootte van <h1>
• De height van de doorhaal-lijn (Lees: de dikte ervan)
• De kleur van de doorhaal-lijn (in background)
• De tijdsduur en het verloop van de animatie. - In plaats van <h1> kun je ook een andere koppen inzetten, bijvoorbeeld <h2>, <h3>, enz.
- De parameter animation-delay (in CSS animation) is niet gebruikt en is daarom 0. Als je die wel gebruikt gaat het effect voor een deel verloren.
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">
(Zet dit in de <BODY> op de plaats waar de kop met het doorhaal-effect moet verschijnen).
<h1>Ik ben <del>niet</del> jong</h1>
Downloaden:
Druk op de knop:
File: voorb519.zip, 637 bytes.
