Tekst en afbeelding bedekken met bewegend masker
Een website voor het promoten van een product of evenement is vaak gebaat bij een spectaculaire startpagina. Op deze bladzijde wordt er een besproken. We beginnen met een voorbeeld.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 89 (september 2016), pag. 60 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.
Voor deze website is het voorbeeld verfraaid. De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de foto.
Deze aanpak is bijzonder geschikt als titelblad van een presentatie, waarbij het document het hele scherm vult. Voor publicatie op het WorldWide Web is het minder geschikt, omdat het niet in elke browser goed werkt. Als je dit wilt gebruiken voor het presenteren van een product in een expositie o.i.d., dan is Edge en Chrome het meest geschikt.
- Er worden twee items besproken:
- De werking van he script.
- Zelf een site mee bouwen.
- De werking van het script
- De code bestaat uit HTML en CSS (in de file styles.css). Er komt geen JavaScript aan te pas.
- De HTML bestaat uit twee enkele <div>-tags, die allebei de klasse abs hebben. De eerste div heeft id="under", de tweede heeft id="over".
- Beide div's bevatten een h1-tag, waarvan de content en de opmaak exact aan elkaar gelijk moeten zijn.
- De h1 in de eerste div heeft id="bg-heading". De h1 in de tweede div heeft
id="masked-image".
- De CSS is eenvoudig, zonder lastige dingen. Het merendeel is nodig voor de opmaak van het document, daar hoeft niets aan veranderd te worden.
- Het enige wat echt aangepast moet worden is de URL van de achtergrondfoto (de meeuw in het voorbeeld). Je vind dat in het CSS-blok html, body.
- De animatie verloopt via @keyframes. Die kun je aanpassen als je wilt. Let er op dat de eigenschappen animation en animation-fill-mode in de blokken #over en #masked-image exact gelijk aan elkaar moeten zijn.
- De opmaak van de tekst wordt geregeld in de blokken h1 en h1 span. Als je geen ondertitel wilt (en dus de
<span>-tags weglaat uit de HTML), kun je het blok h1 span verwijderen.
- Het blok #masked-image bevat
-webkit-background-clipen-webkit-text-fill-color. Dit zijn eigenschappen die, op het moment dat dit wordt geschreven, nog niet voldoende door de grote browsers worden ondersteund.
- Het werkt niet goed met FireFox op Android. Daar verloopt de beweging soms schokkerig.
- Zelf een site mee bouwen
- Download de code en pak hem uit. Geef de file html535a.htm een andere naam, bijvoorbeeld index.html.
- Pas de tekst aan in de <h1>-tags.
- Regel een geschikte achtergrondfoto en link deze in styles.css.
- Het voorbeeld gebruikt een 'driehoekig' masker. Dit kun je veranderen door mask1.png en mask2.png aan te passen. Zorg ervoor dat beide maskers exact dezelfde vorm hebben.
- De kleuren van het masker kun je aanpassen door de kleur van mask1.png en/of mask2.png te veranderen. Als
je de kleur van mask1.png verandert, zou je color in #bg-heading dezelfde kleur moeten geven (nu: allebei
wit).
- Tenslotte
- Kijk ook eens naar het item Website openen in full-screen mode. Dat is voor deze toepassing zeer geschikt.
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">
(Dit is de <BODY>).
<div id="under" class="abs">
<h1 id="bg-heading">zweven<br><span>op de wind</span></h1>
</div>
<div id="over" class="abs">
<h1 id="masked-image">zweven<br><span>op de wind</span></h1>
</div>
Downloaden:
Druk op de knop:
File: voorb535.zip, 19 964 bytes.
