Foto met bijschrift en geanimeerde mouseover II
Hieronder zie je een foto met een bijschrift er onder. Als je er met de muis overheen gaat zoomt de foto een beetje in
en beweegt het bijschrift een beetje naar boven.
Dit effect werkt niet op een aanraakscherm.
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.
- 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 class="fotoContainer". Deze bevat de foto.
- De foto is in een container gezet met vaste afmetingen, die zich gedraagt als viewport. Als de foto inzoomt blijven de afmetingen van de viewport ongewijzigd. zie ook het item Figuur in een Viewport (Draggable Content).
- De foto zelf heeft id="foto".
- De tweede <div> binnen de wrapper heeft id="bijschrift". Deze bevat het bijschrift.
- Bij de elementen die geanimeerd worden 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 300px, de hooogte op 230px. Er is 10px binnenmarge en de verticale buitenmarge is nul. De buitenmarge wordt ook gebruikt om het element horizontaal in het document te centreren. Tekst (lees: lijn-elementen) tekst worden gecentreerd. De achtergrond is lichtgroen en er is een donkerblauwe rand.
- De klasse fotoContainer bepaalt de zichtbare afmetingen van de foto (width en height). In het voorbeeld
zijn die gelijk aan de afmetingen van de foto, maar dat hoeft niet. De foto mag ook groter zijn. Wel is het noodzakelijk om
overflow: hidden te gebruiken. Daardoor gaat fotoContainer zich gedragen als viewport, zie ook de eerder
genoemde link.
fotoContainer wordt horizontaal gecentreerd binnen wrapper met margin: 0 auto 0 auto. - De foto heeft id="foto". Daarvan zijn de breedte en de hoogte gedefinieerd, alsmede het verloop van de animatie. Deze duurt ¾ seconde en heeft het 'standaard' ease verloop.
- Voor de opmaak van id bijschrift is behoorlijk wat nodig. Behalve 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.
Daarnaast zijn er regels voor de achtergrond en het centreren van de tekst: zowel text-align: center als margin: 4px auto 0 auto. Ook hier duurt de transition ¾ seconde en is er het 'standaard' ease verloop. - Zowel de foto als het bijschrijft zijn hyperlink. Voor het bijschrift zijn er eaxtra regels voor die link, voor de foto
is dat niet nodig.
- Als de muis over de foto of het bijschrift gaat, krijgt de foto de klasse Factief erbij. Daardoor zoomt de foto 15% in. Dat gebeurt met scale(1.15).
- 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 ontstaat doordat het bijschrift de klasse Bactief krijgt. Bactief bevat de regel transform: translateY(-20px). Dit betekent een verticale verschuiving over -20px, dat is naar boven.
- 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. Pas de grootte .wrapper, .fotoWrapper en #foto aan voor je eigen doeleiden
- Pas bij #bijschrift de lettergrootte, het lettertype, de waarde van vertical-align, enzovoort, aan voor je eigen doeleinden.
- oud er erg in dat het bijschrijft bij smalle beeldschermen niet altijd in één regel past en dus over twee regels wordt verdeeld. Dat omzeil je door de achtergrondkleur van #bijschrijft gelijk te maken aan de achtergrondkleur van .wrapper.
- 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 de foto en het bijschrift moeten verschijnen.).
<div class="wrapper">
<div class="fotoContainer">
<a href="index.html"><img src="foto.jpg" id="foto"></a>
</div>
<div id= "bijschrift">
<a href="index.html">Hoge spanning in de mast</a>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb605.zip, 1126 bytes.
