Geanimeerd tekstmasker II
Hierboven staat het logo van '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 figuren. 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.
In FireFox gaat de beweging niet altijd mooi vloeiend. Soms is dat storend.
- 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 wat CSS. Er komt geen JavaScript aan te pas.
- De HTML definieert drie geneste <div>-tags, van buiten naar binnen: wrap, logo en inner-logo.
- De wrap dient om de verschillende onderdelen bij elkaar te houden en om het geheel te positioneren op de pagina.
- wrap is even groot als het tekstmasker (hier: 187 × 420 px).
- logo bevat het tekstmasker. In het voorbeeld is dat een .PNG-bestand waarvan een deel (de tekst) transparant is. De achtergrond van het tekstmasker is dezelfde als de achtergrondkleur van het document waar het in staat. Daardoor lijkt het één geheel.
- inner-logo bevat de bewegende afbeelding. Deze is even groot als logo en op dezelfde plaats gepositioneerd. Door de waarde van z-index kleiner te maken dat die van logo staat de inner-logo altijd achter logo.
- De foto in inner-logo is via CSS ingebed als achtergrondfoto. Door de plaats van innerlogo beweegt de foto ook. Met behulp van overflow:hidden wordt voorkomen dat de foto onder het tekstmasker uitsteekt.
- De animatie gaat met @keyframes.
- Inbouwen in je eigen site
- Bouw de code op in je eigen .HTML-bestand, zoals hier onder is aangegeven.
- Zorg voor een mooie achtergrondfoto en een .PNG-file met het masker.
- Maak de .PNG-afbeelding even groot als je het masker op het scherm wilt laten verschijnen. Het werkt het gemakkelijkst als de achtergrond en het .PNG-bestand dezelfde hoogte hebben.
- Pas de CSS aan voor wat betreft de height en de width.
- Pas de animatie in de CSS aan aan je eigen smaak.
- Je kunt hier ook een stilstaand beeld mee maken. Verwijder in dat geval de verwijzingen naar animation uit de klasse inner-logo. Verwijder ook het hele @keyframesblok.
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:420px;
height:187px;
margin:5px auto;
}
.logo {
width:420px;
height:187px;
background:url(ben-logo-trp.png);
}
.inner-logo {
width:100%;
height:187px;
position:relative;
background:#fff url(foto.jpg) repeat-x;
overflow: hidden;
animation-name:bg;
animation-duration:25s;
animation-iteration-count:infinite;
animation-timing-function:ease;
animation-direction:alternate;
z-index:-1;
}
@keyframes bg {
0% { background-position: 0% }
100% { background-position: 100% }
}
</style>
(Zet dit in de <BODY> op de plaats waar het tekstmasker moet verschijnen).
<div id="wrap">
<div class="logo">
<div class="inner-logo"></div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb485.zip, 535 bytes.
Opmerking:
Je kunt dit effect ook bereiken met behulp van gewone tekst en de de CSS-eigenschap text-clip. Zie daarvoor het item
Geanimeerd tekstmasker III.
