Afbeeldingen met TV-ruis

Hieronder zie je twee maal dezelfde foto. De linker foto is helder, de rechterfoto heeft een soort ruis die lijkt op wat je vroeger had bij televisie.
Op deze pagina wordt uitgelegd hoe je zoiets aanpakt.

Inspiratie heb ik opgedaan door een artikel in Webdesigner Magazine nr. 93 (februari 2017), pag. 16 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor toepassing op deze site heb ik de code aangepast voor gebruik op een losse afbeelding in plaats op de achtergrond van een heel document.

• De code voor de linker foto is weinig interessant, het gaat immers om het effect op de rechter foto. De linker foto blijft dan ook grotendeels buiten beschouwing.
• Het ruis-effect wordt gemaakt door op een foto een bijna transparante .PNG-afbeelding te leggen. Deze wordt kris-kras heen en weer bewogen, met een hoge snelheid. Zo ontstaat de gewaarwording van ruis.
   
• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML en CSS (in de file styles.css). Er komt geen JavaScript bij kijken.
• HTML
• De HTML bestaat uit een paar geneste <div>-tags met daarin de foto en de .PNG-afbeelding.
• De buitenste <div> heeft het id="wrapper". Die dient om de foto-met-ruis te positioneren in het document. In het voorbeeld zorgt wrapper er ook voor dat beide foto's netjes naast elkaar staan.
• Binnen wrapper is er een <div> met id="fotoOK". Dat is de linker foto.
• De tweede <div> binnen wrapper heeft class="fotoRuis. Daarbinnen zijn weer twee <div>-tags:
  
  • De eerste <div> binnen fotoRuis heeft class="ruis". Daarin zit foto, zonder ruis-effect.
  • De tweede <div> binnen fotoRuis heeft geen class of id. Hierin wordt de .PNG-afbeelding geplaatst door de CSS. De CSS zorgt er ook voor dat het ruis-effect ontstaat.
• CSS
• Allereerst wordt wrapper ingesteld. Voor het voorbeeld is het de volle breedte van het document. De hoogte is 207px, dat is gelijk aan de hoogte van de foto + de top- en bottom padding. Om het werken met margin en padding wat gemakkelijker te maken is box-sizing gebruikt.
• Daarna volgt fotoOK. De foto wordt aan de linker kant van het document gezet, in het midden van een blok van 270px breed met 10px binnenmarge links en rechts. (De foto zelf is 250px breed).
• Nu komt fotoRuis. De CSS lijkt veel op die van fotoOK. De foto wordt aan de rechterkant van het document gezet in het midden van een blok van 270px breed met 10px binnenmarge links en rechts. (De foto zelf is 250px breed).
• De hoogte van fotoRuis wordt expliciet ingesteld, om ervoor te zorgen dat het ruis-effect op de hele foto zichtbaar is.
• Daarna volgt het positioneren van de foto zelf (met klasse ruis). Die staat relative ten opzichte van fotoRuis. top en left staan default op nul. De padding van fotoRuis wordt meegenomen.
• Nu is de ruis zelf aan de beurt. Hiervoor wordt .fotoRuis > *:last-child gebuikt: De laatste tag binnen fotoRuis wordt ingesteld. In dit geval is het een lege <div>, maar het kan in principe elk wiilekeurig block-element zijn.
  
  • Net als bij ruis is de positionering relative en worden top en left over­genomen uit fotoRuis.
  • De achtergrond is van de lege <div> is het .PNG-plaatje hier rechts. Het bevat alleen de zwarte en witte 'stippen' waar de ruis mee wordt gemaakt.
  • De achtergrond wordt in de linker bovenhoek van de lege <div> gepositioneerd.
  • Het hele oppervlak van de lege <div> wordt bedekt door het plaatje te herhalen in zowel horizontale als verticale richting.
  • De lege <div> wordt bijna transparant gemaakt (opacity: .35;). Merk op dat het subtiele effect verdwijnt als je een andere waarde neemt voor opacity.
  • De lege <div> wordt buiten de foto geplaatst en krijgt dezelfde afmetingen als de foto.
  • Tenslotte wordt de animatie opgegeven. Een volledige cyclus duurt 0.3 seconden. De animatie gaat oneindig door, verloopt lineair en alternerend (dus van 0% naar 100%, dan terug naar 0%, dan weer naar 100%, enz.).
  • De beweging zelf wordt gestuurd met keyframes.
  
  Zie ook de items Content opmaken met :first-child en :last-child, Over * en [] in Style Sheets, Over <, + en ~ in Style Sheets en Over @keyframes.
• Het spreekt voor zich dat de browser overweg moet kunnen met animation en @keyframes. Dat zijn alle moderne browsers, mits voorzien van recente updates.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit.
• Bouw de code op zoals hier aangegeven. De <div>-tag met klasse fotoOK kun je desgewenst weglaten. Verwijder in dat geval ook het blok voor de klasse fotoOK uit de file styles.css.
• Regel een geschikte foto, zet die in de HTML, in de <div>-tag met klasse ruis.
• Pas de CSS aan:
  
  • #wrapper: height := hoogte foto + 2 × padding (top & bottom).
  • .fotoRuis: height := hoogte foto; width := breedte foto + 2 × padding (left & right).
  • .fotoRuis > *:last-child: height := hoogte foto; width := breedte foto; eventueel url('...') in background-image.
• Je kunt ook nog wat spelen met de percentages en de posities in @keyframes. Dat zal het effect waarschijnlijk niet mooier of spectaculairder maken.
• Je kunt ook nog wat spelen met opacity en de duur van de animation. Dat zal het effect zichtbaar anders maken.

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">

(Zet dit in de <BODY> op de plaats waar .....).

<div id="wrapper">
  <div id="fotoOK">
   <img src="foto.jpg" alt="" height="187" width="250" border="0">
  </div>
  <div class="fotoRuis">
    <div class="ruis">
      <img src="foto.jpg" alt="" height="187" width="250" border="0">
    </div>
    <div></div>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb554.zip, 14 272 bytes.