Video met flip-effect
Ben Boukes
Engineer
Web-hobbyïst
Amateur-fotograaf
Fractal-liefhebber
Hierboven zie je een video (het geluid is uitgeschakeld). Als je er met de muis overheen gaat, klapt die om en en zie je
een 'reclame' voor mijn websites.
Op deze pagina wordt uit de doeken gedaan hoe je dit aanpakt.
Dit is een bewerking van een script uit Webdesigner Magazine nr. 90 (oktober 2016), pag. 58 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze website heb ik het voorbeeld wat vereenvoudigd.
De code van het voorbeeld kun je downloaden, echter zonder het filmpje.
- 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, CSS en JavaScript.
- HTML
- De HTML-code bestaat uit een aantal <div>-tags, de voorkant met het filmpje en de achterkant met het visitekaartje. Deze twee worden bij elkaar gehouden door een <div>-tag met class="flip", waarmee het effect wordt gemaakt. Daaromheen is er nog een <div>-tag met class="container", die wordt gebruikt om het geheel in het document te positioneren.
- De <div>-tag met het filmpje heeft class="voor". Daarbinnen is een <video>-tag met id="video". Attributen voor het afspelen van de video worden geregeld via JavaScript, zie verder in dit artikel.
- De <div>-tag met het visitekaartje heeft class="achter". Daarbinnen is HTML-code waarmee
de inhoud van het kaartje wordt gemaakt. Je kunt daar alle HTML inzetten die je wilt. In het voorbeeld zijn dat <div>,
<p> en <ul> in combinatie met <li>, maar plaatjes kunnen ook.
- Op het omdraaien van het filmpje wordt hier niet ingegaan. Zie daarvoor het item Plaatje
omdraaien met 3D-effect.
- CSS
- De CSS begint met de container. De cursor verandert zodat je als bezoeker kunt zien dat er wat kan gebeuren. Ook wordt perspective ingesteld, zodat het er net even wat mooier uitziet. De vendor-prefix -webkit- is nodig voor Edge.
- Daarna worden de afmetingen van het filmpje (#video) vastgelegd. De klassen container, voor en achter krijgen dezelfde afmetingen.
- Als je met de muis over het filmpje (lees: container) gaat, wordt flip omgedraaid (rotateY(180deg)). Dat komt doordat flip binnen container is geplaatst (zie de HTML). Omdat de klassen voor en achter allebei binnen flip staan, draaien die ook mee.
- De klassen voor en achter hebben allebei de eigenschap backface-visibility: hidden;. Dat betekent dat de achterkant onzichtbaar is. Het visitekaartje (achter) staat in zijn 'normale' stand omgedraaid (rotateY(180deg)) en is dan niet zichtbaar.
- Voor het overige wordt de CSS alleen gebruikt voor opmaak-doeleinden.
- JavaScript
- Het JavaScript zorgt ervoor dat het filmpje wordt gestart. Daarvoor gebruikt het de id van de <video>-tag.
- Het stelt eerste een paar attributen in (autoplay, loop en muted).
- Daarna wordt de methode load() aangeroepen om de film daadwerkelijk te starten.
- Het inzetten van JavaScript is hier eigenlijk niet nodig. Alle instellingen kunnen ook worden gemaakt met de attributen van de <video>-tag. Zie het item Videofilmpjes op je website II: <video>-tag voor meer informatie.
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 het filmpje moet verschijnen).
<div class="container">
<div class="flip">
<div class="voor">
<video id="video">
<source src="filmpje.mp4" type="video/mp4">
<source src="filmpje.ogg" type="video/ogg">
<source src="filmpje.webm" type="video/webm">
</video>
</div><!-- voor -->
<div class="achter">
<div class="achter-titel">Ben Boukes</div>
<p>Engineer<br>
Web-hobbyïst<br>
Amateur-fotograaf<br>
Fractal-liefhebber</p>
<ul class="info">
<li><a href="https://www.webmasterij.nl"
target="nieuw">www.webmasterij.nl</a></li>
<li><a href="https://www.webmasterij.nl/fotoalbum"
target="nieuw">www.webmasterij.nl/fotoalbum</a></li>
<li><a href="https://www.webmasterij.nl/fractals"
target="nieuw">www.webmasterij.nl/fractals</a></li>
</ul>
</div><!-- achter -->
</div><!-- flip -->
</div><!-- container -->
<script>
var myVideo = document.getElementById("video");
myVideo.autoplay = true;
myVideo.loop = true;
myVideo.muted = true;
myVideo.load();
</script>
Downloaden:
Druk op de knop:
File: voorb540.zip, 1209 bytes.
