Ben's Hobbyhoekje -- Geanimeerd tekstmasker

Geanimeerd tekstmasker

De tekst in het witte vlak hier onder is op een bijzondere manier ingekleurd. Als je met de muis beweegt verandert de inkleuring van de tekst. Op deze pagina wordt uitgelegd hoe je dit aanpakt.
N.B.: Dit werkt niet niet op een aanraakscherm, een muis is echt nodig.

Ben's

Hobby-

hoekje

Er worden twee items besproken:
1. Oorsprong en beschrijving van het script.
2. Inbouwen in je eigen website.
Oorsprong en beschrijving van het script
De maker van dit script is Robert Borghesi. Ik heb het gevonden op jQueryScript.net. Het staat ook op CodePen.
Helaas is de code op die twee sites niet niet onmiddellijk bruikbaar. Ik heb daarom de code genomen van de demo-pagina en die bewerkt voor deze site. De code van het voorbeeld staat onderaan de pagina, die kun je ook downloaden om zelf te gebruiken, echter zonder de foto.
Dit is een jQuery-plugin. Je hebt dus ook jQuery nodig. Op deze site is versie 1.11.1 gebruikt, maar met wat oudere versies gaat het ook goed. Je betrekt hem het beste van een CDN.
Er is (natuurlijk) ook een $(document).ready-function. Die zorgt ervoor dat de achtergrond beweegt als de muis wordt bewogen.
De benodigde HTML bestaat uit twee geneste <div>-tags. De buitenste, met de class container, zorgt voor de witte achtergrond. De binnenste, met de class title, bevat de achtergrond foto en clipt de tekst. Een en ander wordt opgemaakt met CSS.
De afmetingen van de achtergrondfoto moeten veel groter zijn dan de afmetingen van de container. Anders is het effect nauwelijks zichtbaar.
Inbouwen in je eigen site
De code staat onderaan de pagina. Die kun je zo overnemen.
Het is leuk om te experimenteren met de berekening van traX en traY, in de $(document).ready-function. Met wat eenvoudige aanpassingen krijg je al gauw een heel ander effect.
In de CSS is een aantal zaken die je kunt veranderen. In de class title zijn dat: font-weight, font-size, background url(), background-position, line-height, letter-spacing en margin.
In de class container is dat color.
De niet-genoemde zaken kun je beter ongemoeid laten.
Pas op met de achtergrondkleur in de class container. Helemaal wit (#fff) is vaak niet aan te raden, zeker als de rest van de pagina een andere kleur heeft (het wit wordt dan erg fel). Ikzelf gebruik dan graag de kleur #fafafa, dat is heel licht grijs.

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>
.title {
font-weight: 800;
color: transparent;
font-size: 120px;
background: url("helemooiefoto.jpg) repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
background-clip: text;
position: relative;
text-align: center;
line-height: 90px;
letter-spacing: -8px;
margin:20px 0;
}
.container { background-color:#fafafa; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

(Zet dit in de <BODY>, op de plaats waar het tekstmasker moet komen).

<div class="container">
<div class="title">Ben's<br> <br>Hobby-<br>
 <br>hoekje<br> </div>
</div>

(Zet dit helemaal aan het eind van de <BODY>).

<script>
$(document).ready(function(){
var mouseX, mouseY;
var ww = $( window ).width();
var wh = $( window ).height();
var traX, traY;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 570) + 40;
traY = ((4 * mouseY) / 570) + 50;
$(".title").css({"background-position": traX + "%" + traY + "%"});
});
});
</script>

Downloaden:

Druk op de knop: File: voorb438.zip, 863 bytes.