Geanimeerd tekstmasker III
BEN
Hierboven staat het woord 'Ben'. In de letters beweegt een foto. Op deze pagina wordt een van de mogelijkheden besproken
om dit te bereiken.
De code staat onderaan de bladzijde. Die kun je ook downloaden, alleen zonder de achtergrondfoto. Daar moet je zelf voor zorgen.
Dit is een vrije bewerking van een artikel uit Webdesigner Magazine nr. 75 (april 2015), pag. 56 en 57.
Dit blad wordt sinds november 2017 niet meer gemaakt.
Wat overbodige CSS-code is verwijderd of aangepast.
- Er worden twee items besproken:
- De werking van het script, in globale termen.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit HTML en was CSS. Er komt geen JavaScript aan te pas.
- De HTML definieert een <div>-tag, met daarbinnen een <span>-tag. De <div>-tag heeft id="wrap", de <span>-tag heeft geen id of class.
- De wrap dient om de verschillende onderdelen bij elkaar te houden en om het geheel te positioneren op de pagina.
- wrap moet breed genoeg zijn om de hele tekst te bevatten (hier: 450 px).
- De tekst zelf staat binnen de <span>-tag. De <span>-tag bevat ook de achtergrond, die wordt bewogen met animation en @keyframes.
- Door de tekst met text-fill-color transparant te maken en door alleen het deel van de achtergrond te tonen dat
onder de letters zit background-clip, wordt het effect bereikt.
In Firefox verloopt de beweging niet altijd nooi vloeiend. Soms is dat storend.- Alle grote browsers hebben de vendor-prefix -webkit-
nog nodig voor background-clip en text-fill-color.
- Inbouwen in je eigen site
- Bouw de code op in je eigen .HTML-bestand, zoals hier onder is aangegeven.
- Zorg voor een mooie achtergrondfoto. Regel voor de tekst een mooi font; een webfont is het overwegen waard.
- Maak de achtergrond groot genoeg om helemaal "in" de letters te passen. Dat geeft het mooiste effect.
- Pas de CSS aan voor wat betreft de opmaak van de letters.
- Pas de animatie in de CSS aan aan je eigen smaak.
- Tenslotte
- De toepasbaarheid van deze aanpak is nog beperkt doordat niet alle browsers backgound-clip en text-fill-color volledig ondersteunen. Een benadering waarbij het masker wordt gemaakt met behulp van een gedeeltelijk transparante figuur is op dit moment (mei 2017) beter. Zie het item Geanimeerd tekstmasker II.
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>).
<style>
#wrap {
width:450px;
margin:0 auto;
text-align:center;
}
#wrap span {
position:relative;
font-size:150px;
font-weight:800;
line-height:1;
background:url(foto.jpg) center center;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
animation: bg 10s linear infinite alternate;
}
@keyframes bg {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
</style>
(Zet dit in de <BODY> op de plaats waar de tekst moet verschijnen).
<div id="wrap">
<span><i>BEN</i></span>
</div>
Downloaden:
Druk op de knop:
File: voorb486.zip, 529 bytes.
