Ouderwets bioscoop-film effect
Hieronder zie je een (stilstaand) beeld, dat niet helemaal rustig is. Over het midden loopt een verticale, witte streep.
Het beeld flikkert, zoals je ziet bij heel oude films.
Op deze bladzijde wordt uitgelegd hoe je dit kunt aanpakken. De code van het voorbeeld met het 'effect' kun je downloaden
om zelf te gebruiken, echter zonder de achtergrondfoto. Daar moet je zelf voor zorgen.
Dit is een vrije bewerking van een script dat wordt besproken in Webdesigner Magazine nr. 80 (oktober 2015), pag. 62 en 63.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur van het script is niet bekend; het lijkt te zijn nagebouwd van een site die de geschiedenis vertelt van de Amerikaanse
honkbalclub St. Louis Browns.
Voor deze site is een andere achtergrond gekozen en is het ingebed in een document. In de oorspronkelijke versie is het schermvullend.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- In het document is een blok gemaakt met behulp van een <div>. Die heeft een achtergrondfoto die de hele oppervlakte van de <div> vult.
- Daar bovenop draait een filmpje (in mp4-formaat) dat automatisch start en oneindig wordt herhaald. Het filmpje is in zwart-wit
en bevat alleen de ruis, de krassen en de helderheidsverschillen die in oude films gebruikelijk zijn.
Op het moment dat dit wordt geschreven werkt het niet goed in Edge op Android. Het lijkt een bug te zijn in Chromium, de rendermotor van Edge. De bug zal te zijner tijd wel verdwijnen.
- De film is gedeeltelijk doorzichtig gemaakt, waardoor de achtergrond zichtbaar wordt.
- De code bestaat uit HTML en CSS. Er wordt geen JavaScript gebruikt.
- De HTML van het voorbeeld bestaat uit één <div>-tag, met daarbinnen een <video>-tag.
- De <div>-tag heeft class="filmBeeld". Dat dient alleen voor de opmaak door CSS.
- De CSS stelt de grootte van filmBeeld in op 500 × 281 px. De achtergrondfoto heeft dezelfde afmetingen.
- De foto past daardoor perfect in het blok.
- Het filmpje is 1000 × 562 pixels groot. Het zweeft boven de achtergrondfoto door z-index hoger te maken dat de z-index van de <div>-tag.
- De achtergrond is zichtbaar doordat de opacity kleiner is dan 1. Hier is 0.5 gebruikt. Voor deze toepassing is
dat een goede waarde.
- Inbouwen in je eigen site
- Pak de downloadfile uit en zet de code in je eigen HTML-bestand.
- Maak een achtergrondfoto. Deze moet de beeldverhouding 16:9 hebben. Op deze bladzijde is 500 × 281 px gebruikt, maar het kan ook groter of kleiner. De beeldverhouding is belangrijk; die moet gelijk blijven.
- Neem de afmetingen van de achtergrond over in de CSS van de klasse .filmBeeld. Zet de naam van de foto in de url() van background.
- Pas de border aan naar je eigen smaak, of verwijder hem.
- Pas de opacity van de film aan als dat nodig is. Hier is 0.5 gebruikt, maar voor een andere foto kan dat anders zijn. Hoe donkerder de foto, hoe lager de opacity moet zijn voor een goed effect.
- Als je wilt weten hoe de film er zonder achtergrond uit ziet, zet je opacity:1. De foto verdwijnt dan.
- Zorg ervoor dat de z-index van de film groter is dan de z-index van de <div>-tag. Die moet op zijn beurt groter dan of gelijk zijn aan de z-index van het document. Hier is de default-waarde 0 gebruikt.
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>
.filmBeeld {
position:relative;
width:500px; height:281px;
margin:20px auto; padding:0;
background:url(donkerbos.jpg) no-repeat;
border:1px solid black;
}
.filmBeeld video {
position:absolute;
z-index:100;
top:0; left:0;
max-width:100%;
max-height:100%;
opacity:0.5;
}
</style>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<div class="filmBeeld">
<video src="flicker.mp4" loop autoplay></video>
</div>
Downloaden:
Druk op de knop:
File: voorb082.zip, 457 787 bytes.
