Scroll-effect met stapeltje foto's
Hier onder zie je een foto met daarnaast een scrollbalk. Met de scrollbalk kun je door de foto's scrollen. Dat gaat ook met het muiswieltje als de muisaanwijzer zich boven de foto bevindt. Op een aanraakscherm kun je ook naar boven en naar beneden vegen.
Op deze pagina wordt getoond hoe je dit aanpakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto's. Daar moet je zelf voor zorgen.
Inspiratie voor dit item heb ik geput uit een artikel in Webdesigner Magazine nr. 61 (november 2013), pag. 72 en 73.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- Het script bestaat uit HTML (in de <body>) en CSS (in de <head>).
- De HTML bestaat uit een <div>tag met het id="wrapper". Deze dient om de afmetingen van het stapeltje foto's vast te leggen en om het te positioneren op het scherm.
- De afmetingen van de foto's moeten allemaal even groot zijn, anders werkt het niet goed.
De foto's in deze toepassing hebben allemaal de afmeting 250 × 187px.
- De eigenschappen van de wrapper zijn vastgelegd in de CSS. De width is 260px, dat is 10px meer dat de foto's breed zijn. Dat is nodig om ruimte te maken voor de verticale scrollbalk.
- De positionering is relative. Daardoor verschijnt de foto op de plaats waar je de wrapper in je HTML-code zet.
- De verticale scrollbalk ontstaat doordat overflow-y:scroll is gebruikt.
- Er is geen horizontale scrollbalk, omdat overflow-x:hidden is gebruikt.
- Het centreren van de foto's is bij deze toepassing een probleem. margin:auto werkt niet, om voor mij onduidelijke
reden. Daarom is een oud trucje gebruikt om de foto's te centreren:
- margin-left is de helft van de breedte van het element dat moet worden gecentreerd, met een min-teken. In dit voorbeeld is dat -130px. De foto valt hierdoor voor de helft buiten het document.
- padding-left is 50%. Hierdoor wordt aan de linkerkant witruimte ingevoegd, precies de helft van de breedte van het document.
- Door de combinatie van deze zaken staat het element (dus de foto's) netjes in het midden.
- Binnen de wrapper staat voor elke foto een aparte <div>-tag. Deze heeft de klasse blok en een uniek id. De id's stellen elk apart een eigen achtergrond-foto in. De verdere opmaak wordt door de klasse blok verzorgd.
- De achtergrond van de klasse blok wordt niet automatisch herhaald. De afmetingen moeten gelijk zijn aan die van de wrapper.
- De positionering is relative, met default-waarden voor de plaats (top, left). Daarmee wordt bereikt dat de foto's precies op de plaats van de wrapper zichtbaar zijn.
- Boven elke foto is een (transparante) rand van 2px gedefinieerd. Dat werkt als scheider tussen de opeenvolgende foto's.
- De foto's staan in een rij onder elkaar. Daarbij werkt de wrapper als viewport: Alles wat zich binnen de wrapper
bevindt is zichtbaar, de rest niet.
- Inbouwen in je eigen site
- Download de code en pak de .zip-file uit. Zet de code in je eigen document zoals hieronder is aangegeven.
- Regel een set foto's, zorg dat ze allemaal even groot zijn. Zet de bestandsnamen in de CSS (#box…).
- Maak voor elke foto een <div>-tag aan in de HTML-code. Zorg dat alle id's uniek zijn.
- Pas de height en de width aan in #wrapper en .blok.
- Stel margin-left in op de heft van width (met een min-teken!)
- Pas eventueel de breedte van border-top aan, of haal hem helemaal weg.
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>
#wrapper {
position: relative;
margin-left: -130px; padding-left: 50%;
height: 187px;
width: 260px;
overflow-x: hidden;
overflow-y: scroll;
}
.blok {
height: 187px;
width: 260px;
background-repeat: no-repeat;
position: relative;
border-top:2px solid transparent;
}
#box0 { background-image: url(foto0.jpg); }
#box1 { background-image: url(foto1.jpg); }
#box2 { background-image: url(foto2.jpg); }
#box3 { background-image: url(foto3.jpg); }
#box4 { background-image: url(foto4.jpg); }
#box5 { background-image: url(foto5.jpg); }
#box6 { background-image: url(foto6.jpg); }
#box7 { background-image: url(foto7.jpg); }
#box8 { background-image: url(foto8.jpg); }
#box9 { background-image: url(foto9.jpg); }
</style>
(Zet dit in de <BODY> op de plaats waar De foto's moeten verschijnen.)
<div id="stage">
<div class="blok" id="box0"></div>
<div class="blok" id="box1"></div>
<div class="blok" id="box2"></div>
<div class="blok" id="box3"></div>
<div class="blok" id="box4"></div>
<div class="blok" id="box5"></div>
<div class="blok" id="box6"></div>
<div class="blok" id="box7"></div>
<div class="blok" id="box8"></div>
<div class="blok" id="box9"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb109.zip, 540 bytes.
