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.

Gebruik:

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: Download deze code  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.

 
terug

html-485; Laatste wijziging: 27 mei 2020