Hover-effect met zoom II: in viewport
Hieronder zie je een paneel met vier foto's. Als je een foto aantikt of er met de muis overheen gaat, wordt er op die foto
ingezoomd.
Als de muis van de foto af gaat of je tikt buiten het paneel, neemt de foto zijn oorspronkelijke afmetingen weer aan.
De ruimte waar de foto in staat (de viewport) verandert niet van grootte.
Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de plaatjes. Die moet je zelf toevoegen.
Inspiratie voor deze pagina heb ik opgedaan op www.vermont.eu/en/barbour, zoals die er uit zag op 15 mei 2017. Het effect bij 'Instagram' heb ik nagebouwd.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit CSS en wat HTML. Er komt geen JavaScript aan te pas.
- De CSS staat in de file styles.css. Om de opmaak van het paneel met het effect aan te passen moet je die veranderen.
- De HTML bestaat uit een set geneste <div>-tags, met onderstaande structuur:
<div class="wrapper">
<div class="row">
<div class="cell">
<div class="zooming">
<img src="foto-1.jpg" alt="Molen">
</div>
</div>
<div class="cell">
<div class="zooming">
<img src="foto-2.jpg" alt="Paddenstoel">
</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="zooming">
<img src="foto-3" alt="Roos">
</div>
</div>
<div class="cell">
<div class="zooming">
<img src="foto-4.jpg" alt="Park">
</div>
</div>
</div>
</div>
- De vier foto's worden bij elkaar gehouden door een wrapper. Deze dient om het blok bij elkaar te houden en op de pagina te positioneren. De hoogte en breedte moet je aanpassen, zodanig dat je eigen foto's (met marges) er precies in passen.
- Binnen de wrapper is een 'table' gebouwd met behulp van <div>-tags.
- Binnen de wrapper zijn twee (horizontale) rijen (klasse row).
- Elke rij bevat twee 'cellen' (klasse cell), met daarin de klasse: zooming.
- De cell is precies even groot als de foto die er in komt.
- De klasse zooming bevat de foto (<img>-tag). De afmetingen zijn gelijk aan de afmetingen van de foto.
- Als de muis-pijl boven een foto komt, wordt deze groter. Dat wordt bereikt door een transform uit te voeren op
zooming: de schaal in X- en Y-richting wordt op 1.5 gezet. De foto wordt dus 50% groter.
Er wordt geschaald vanuit het middelpunt van de foto (dit is default).
De transform wordt vloeiend uitgevoerd met behulp van transition. Deze duurt 3 seconden en gebruikt ease voor een vloeiend effect. - Als de muis de foto verlaat gaat de foto terug naar zijn oorspronkelijke formaat. Ook daarvoor wordt transition
ingezet. Deze duurt 0.4 seconde. Het vloeiende effect is ease-out.
- Inbouwen in je eigen site
- Download de .zip-file en neem de code op in je HTML-bestand, zoals hierboven en hieronder is aangegeven.
- Neem de foto's op in de <img>-tags. Zorg ervoor dat ze even groot zijn. Zo nodig pas je dat aan met een fotobewerkingsprogramma of iets dergelijks.
- Neem de afmetingen van je foto's (height, width) over in de klasse cell.
- Maak de afmetingen van de klasse .zooming gelijk aan de afmetingen van de foto. Pas ook de afmetingen van de klassen
row en wrapper aan.
- Het groeien/krimpen van de foto gebeurt met transform:scale(). De twee parameters moeten even groot zijn, anders
verandert de lengte-breedte verhouding van de foto. De aanpassingen doe je in .zooming:hover.
De schaal-parameters in .zooming moeten gelijk zijn aan 1. - De overgang maak je met transition, zoals hiervoor is aangegeven.
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 paneel met foto's moet verschijnen; zie ook de code eerder op deze pagina).
<div class="wrapper>
.
.
HTML-code, zie hierboven
.
.
</div>
Downloaden:
Druk op de knop:
File: voorb482.zip, 779 bytes.
