Futuristisch glitch-effect
In science-fiction films gebeurt het nogal eens dat de held problemen krijgt met de (video-)communicatie. Hier onder zie
je een voorbeeld van hoe dat er op een web-pagina uit zou kunnen zien. In dit geval een foto van wat een donker bos op een
verre planeet zou kunnen zijn.
Het beeld is niet stabiel qua kleur en afmetingen.
De code kun je downloaden om zelf in je website te gebruiken, alleen zonder de foto. Daar moet je zelf voor zorgen
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 94 (maart 2017), pag. 18 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze website is de code wat vereenvoudigd en is het voorbeeld verfraaid.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- Het script bestaat uit HTML en CSS voor de opmaak en de animatie. Beide staan hier in het document. Er komt geen JavaScript
aan te pas.
- HTML
- D HTML bestaaut uit één enkele <span>-tag, met de klassen image en glitch. Deze tag bevat verder geen content.
- Op deze pagina is, om de foto netjes te centreren, ook nog <div align="center"> gebruikt.
- CSS
- De CSS is er voor de opmaak van de foto (klasse image)) en de animatie (klasse glitch).
- De klasse image legt de afmetingen van de foto vast.
- De foto is de achtergrond van de klasse image. Van die achtergrond worden ook de eigenschappen repeat en size vastgelgd.
- De animatie wordt geregeld door de klasse glitch. Behalve de animatie stelt deze ook display:block in. Dat is nodig om te zorgen dat de (lege) span-tag zichtbaar is in het document.
- De animatie bestaat uit twee sets keyframes, te weten glitchAnim en glitchColor.
- glitchAnim zorgt voor de het vervormen van het beeld. Dit gaat met de transform-functies scaleX() (horizontaal) en scaleX() (verticaal). De schaal wordt korte tijd vergroot of verkleind en daarna weer op 1 gezet.
- glitchColor zorgt voor het verdwijen van de kleur. Dit gebeurt met filter:
grayscale(). Het filter wordt kortdurend ingeschakeld (100%) en daarna weer uit gezet (0%).
- Toepassen in je eigen site
- Zoek een mooie foto uit om het effect op te laten werken.
- Download de .zip-file en pak het uit. Bouw de code op zoals op deze bladzijde wordt beschrevn.
- Pas de CSS-klasse image aan. Zet de bestands-naam in url() en geef de afmetingen op in width en height.
- Pas eventueel de CSS-klasse glitch aan: Duur van de animaties en/of timing functions.
- Pas eventueel de keyframes aan. Verander de percentages, zet er nieuwe bij, haal er weg, enz. Zorg er daarbij voor dat een verandering ook weer moet worden terg gezet. Dua als je bijv. opgeeft 72% { transform: scaleY(1.5) } moet er ook iets zijn van 72.6% { transform: scaleY(1) } of iets dergelijks
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>
.glitch {
display: block;
animation: glitchAnim 3s linear infinite,
glitchColour 7s step-start infinite;
}
.image{
width: 500px;
height: 281px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('foto.jpg')
}
@keyframes glitchAnim {
0%,5%,40%,60%,100% { transform: scaleY(1); }
4.3% { transform: scaleY(1.5); }
61% { transform: scaleX(0.78); }
62% { transform: scaleX(1); }
}
@keyframes glitchColour{
0%,5%,99% { filter: grayscale(0); }
4%,6%,100% { filter: grayscale(100%); }
}
</style>
(Zet dit in de <BODY> op de plaats waar de foto met het effect moet verschijnen).
<div align="center">
<span class="image glitch"></span>
</div>
Downloaden:
Druk op de knop:
File: voorb563.zip, 556 bytes.
