Foto met bijschrift en geanimeerde mouseover I
Hieronder zie je een foto met een bijschrift er naast. Als je er met de muis overheen gaat of er op tikt bewegen ze een beetje naar elkaar toe.
Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.
Ik heb dit effect gevonden op de site lazarus.nl. Die site bestaat niet meer. Voor deze site heb ik het nagebouwd.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code van het voorbeeld is gemaakt met HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
- HTML
- De HTML bestaat uit een <div>-tag met daarbinnen nog twee <div>-tags.
- De buitenste tag heeft de klasse wrapper. Deze dient om de foto en het bijschrift bij elkaar te houden, en om het geheel te positioneren in het document. In het voorbeeld is dat het stuk met de lichtgroene achtergrond.
- De eerste <div> binnen de wrapper heeft id="foto". Deze bevat de foto.
- De tweede <div> binnen de wrapper heeft id="bijschrift". Deze bevat het bijschrift.
- Bij de twee <div>'s binnen de wrapper is voor id's gekozen in plaats van classes. Dat maakt het eenvoudiger de elementen te benaderen met JavaScript.
- Zowel de foto als het bijschrift zijn (gelijke) hyperlinks. In dit voorbeeld brengen ze je naar het voorblad van deze website.
- CSS
- De CSS begint met de klasse wrapper. De breedte staat op 100%, de hooogte op 187px. Dat is de hoogte van de foto op het scherm. Er is 10px binnenmarge en er is geen buitenmarge. De tekst wordt gecentreerd op het scherm gezet. De achtergrond is lichtgroen en er is een donkerblauwe rand.
- De opmaak voor de id foto is eenvoudig: Er is display: inline-block opgegeven om te zorgen dat de foto en het bijschrift naast elkaar, en niet onder elkaar, worden weergegeven. Verder is de vorm en de duur van animatie opgegeven met transition.
- Voor de opmaak van id bijschrift is meer nodig. Behalve display: inline-block en de transition om
de animatie mooi te laten verlopen, moeten ook het lettertype en de lettergrootte, de breedte en de hoogte van het bijschrift
worden ingesteld. Dat brengt gelijk een onvolkomenheid aan het licht.
Tijdens de ontwikkeling heeft de achtergrond van het bijschrift de kleur cornsilk gekregen. Dat was om het gedrag van de animatie te kunnen nagaan. Als het scherm niet zo breed is (tablet, mobiele telefoon) komt de tekst van het bijschrift buiten de gekleurde achtergrond.
Dit is te omzeilen door de breedte van de foto + bijschrift niet breder te maken dan de helft van het document en dat rechts links of te positioneren.
- Als de muis over de foto of het bijschrift gaat, krijgt de foto de klasse Factief erbij. Daardoor verschuift de foto 40px naar rechts. Dat gebeurt met translateX().
- De klasse Factief heeft ook position: relative. Daardoor wordt de translatie uitgevoerd ten opzichte van de linkerbovenhoek van de foto.
- Als de muis de foto of het bijschrift verlaat, wordt Factief verwijderd. Daardoor gaat de foto terug naar zijn beginpositie.
- De beweging van het bijschrift gaat op dezelfde manier als de foto, nu echter met de klasse Bactief. Deze geeft een verschuiving over -40px, naar links dus.
- Het toevoegen en verwijderen van Factief en Bactief gebeurt door JavaScript. Het gaat altijd in paren:
• Als foto de klasse Factief krijgt, krijgt bijschrift de klasse Bactief.
• Als foto de klasse Factief verliest, verliest bijschrift de klasse Bactief.
- JavaScript
- Het JavaScript begint met de declaratie van twee variabelen: foto en bijschrift. De window.onload-function vult deze met verwijzingen naar de id's foto en bijschrift, zodat die niet steeds opnieuw behoeven te worden bepaald.
- De function window.onload wordt uitgevoerd zodra het document is geladen. Aan de foto en het bijschrift worden event-handlers gekoppeld, die er voor zorgen dat er wordt gereageerd op mouseover en mouseout.
- Bij een mouseover wordt de function doEffect aangeroepen. Bij een mouseout wordt de function undoEffect aangeroepen.
- doEffect koppelt de klasse Factief aan de foto en Bactief aan het bijschrift. Hierdoor bewegen de foto en het bijschrift naar elkaar toe.
- undoEffect verwijdert de klasse Factief van de foto en Bactief van het bijschrift. Hierdoor bewegen
de foto en het bijschrift naar hun beginpositie.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op in je document zoals hieronder is aangegeven. Hernoem desgewenst de files styles.css en script.js.
- Regel een geschikte foto, deze moet niet te groot zijn. Maak de hoogte van de wrapper gelijk aan de hoogte van de foto.
- Pas bij #bijschrift de lettergrootte, het lettertype, de waarde van vertical-align, enzovoort, aan voor je eigen doeleinden.
- Advies: Maak de achtergrondkleuren van #bijschrift en de.wrapper aan elkaar gelijk. Neem ook kennis van
de manier om de onvolkomenheid (zie bij CSS) te omzeilen.
Test alles goed, vooral op kleine beeldschermen.
- Het is mogelijk om dit effect meer dan één keer toe te passen in een webdocument. Elke foto en elk bijschrift moet dan een uniek id hebben. Voor elke combinatie van foto met bijschrift zijn aparte functions doEffect() en undoEffect() nodig.
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">
<script src="script.js"></script>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
<div class="wrapper">
<div id="foto">
<a href="index.html"><img src="foto.jpg"></a>
</div>
<div id= "bijschrift">
<a href="index.html">Roze Roos.<br>
Misschien wel mijn beste foto ooit.</a>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb603.zip, 1121 bytes.
