Header met achtergrond waar content overheen schuift III
De techniek die hier wordt besproken is bij uitstek geschikt voor een één-pagina site. Dat is een (meestal) kleine website, die één onderwerp behandelt. Dit soort sites wordt vaak ingezet om kortdurende evenementen te promoten of om iets te presenteren. Soms bevat zo'n site spectaculaire animaties.
We beginnen met een voorbeeld. Er is een foto te zien van een huis met een regenboog er boven. Daar bovenop is de titel geplaatst. Als je scrollt schuiven de titel, de foto en de content naar boven. Daarbij wordt de foto steeds transparanter totdat deze helemaal is verdwenen.
Op deze pagina wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de achtergrondfoto. Daar moet je zelf voor zorgen.
Ik heb dit effect gevonden in de (Android-)app het Nederlands Bijbelgenootschap. Op de desktop-versie (website) van deze
app ontbreekt het effect.
Voor deze site heb ik het effect nagebouwd.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code van het voorbeeld is gemaakt met HTML en CSS (in de file styles.css) en JavaScript (in de file script.js).
Om het te gebruiken moet je wijzigen aan alle drie de code-onderdelen.
- HTML
- De HTML van het voorbeeld bestaat uit een img-tag met id="scrollImg" en een <main>-tag, die samen de hele <body> van het document bedekken. Met behulp van absolute positionering en z-index zijn die bovenop elkaar gelegd.
- Omdat de foto benaderd moet kunnen worden met JavaScript heeft die id="scrollImg"
- De <main>-tag wordt gebruikt als container voor de content. Binnen main kun je alle geldige HTML gebruiken.
- De grote kop aan het begin is gemaakt met <h1>.
- De broodtekst staat in een <section>, die is opgedeeld <article>'s.
- Elk <article> bestaat uit een (tussen-)kopje en tekst. De tussenkopjes zijn gemaakt met <h3>;
voor de tekst zelf is <p> ingezet.
- CSS
- De CSS (in de file styles.css) begint met een beperkte reset van het html-element en de body. De binnen- en buitenmarges worden op nul gezet en het document wordt uitgespreid over de hele breedte en hoogte van het window. Het lettertype wordt ingesteld. De achtergrond heeft dezelfde kleur als de section's en de articles.
- De main-sectie ligt bovenop de foto met id="scrollImg". De z-index is groter dan die van
#scrollImg (in het voorbeeld: 100) om conflicten met van #scrollImg te vermijden.
- De grote kop is gemaakt is gemaakt met h1. De tekstkleur is zwart, de schaduw (text-shadow) is wit.
- De section, waar de broodtekst in zit, heeft de volle hoogte en breedte van het window. De achtergrondkleur is heel licht grijs (#fafafa), niet wit. Op grote schermen leest dat prettiger.
- De section heeft een binnenmarge van 40px bovenaan. Dat is puur voor de mooie opmaak. Er is ook 100px binnenmarge aan de onderkant. Dat is om te voorkomen dat het laatste article onder de rand van de section uitsteekt, wat gebeurt als alle article's niet op de schermhoogte passen.
- De article's zijn elk 34% van het window breed. De boven- en ondermarge zijn nul, links en rechts zijn ze auto. Daardoor staat de tekst horizontaal gecentreerd. De kleur is net-niet-zwart (#333) en de lettergrootte staat op 110%.
- De kopjes boven elk blokje tekst zijn gemaakt met h3. De linkermarge staat op -40px, waardoor de kopjes een beetje
naar links verschuiven. Dat is puur voor het mooie.
- JavaScript
- De enige dingen die in het JavaScript (file script.js) kunt veranderen zijn de variabelen imgWidth en
imgHeight, voor het instellen van de afmetingen van de foto en nSteps voor het instellen van het aantal stappen
voor het veranderen van de opacity van de foto.
- Als eerste wordt een aantal hulp-variabelen gedeclareerd. Daarna wordt een event-listener gemaakt die wordt geactiveerd zodra de pagina is geladen.
- De event-listener bepaalt de afmetingen van de foto op het scherm en vult een array met grenswaarden voor de verticale scroll beweging, die bepalend is voor de opacity van de foto. Ook wordt de hulpvariabele currentOpacity op 1 gezet.
- De event-listener maakt nu een nieuwe listener aan die actief wordt als het browserwindow van grootte verandert. De pagina wordt dan opnieuw geladen.
- Tenslotte wordt een event-listener gemaakt die actief wordt als er wordt gescrolled. Deze listener vergelijkt
window.pageYOffset met de hoogte van de foto.
• Als er meer is gescrolled dan de foto hoog is, wordt opacity op nul gezet. De foto is dan helemaal doorzichtig.
• Als er bijna niet is gescrolled, wordt opacity op één gezet. De foto is dan helemaal zichtbaar, zonder enige vervaging.
• Daar tussen wordt een waarde voor opacity berekend, tussen nul en een. In die berekening wordt een factor 1.33 gebruikt. Deze dient om de vervaging van de foto progressief te laten verlopen, wat natuurlijker voor het menselijk oog. Als de hoogte van je foto veel afwijkt van de 4882 pixels die in het voorbeeld zijn gebruikt, kan het nodig deze waarde iets bij te stellen. Neem een waarde tussen 1.2 en 1.5.
- Inbouwen in je eigen site
- Regel een geschikte foto om te gebruiken in het effect. Deze moet breder zijn dan de meeste beeldschermen, bij voorkeur in breedte-hoogte verhouding 4:3. Breedbeeldformaten groter dan 16:10 zijn minder geschikt.
- Download de .zip-file en pak hem uit. Zet de afmetingen van de foto in script.js. Link script.js en styles.css aan het document zoals hieronder is aangegeven, met code in de head.
- Zet de bestandsnaam van de foto in de body van je HTML-document. Bouw de rest van de body op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Zet de content (broodtekst) in de <article>-tags. Desgewenst kun je de <h1>- en/of de <h3>-tags weglaten.
- Pas de CSS aan aan je eigen wensen. Laat de kleur 'transparent' ongewijzigd.
- Test het geheel grondig uit, op verschillende breedtes van het browserwindow. Pas eventueel de waarde van nSteps aan in het JavaScript. Maak dat getal niet te groot, anders gaat het rekenwerk voor het vervagen van de foto te lang duren en wordt het effect schokkerig.
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 bovenaan in de <BODY>, dus direct na de <body>-tag).
<img src="foto.jpg" id="scrollImg" width="100%">
(Zorg dat de rest van de <BODY> is opgebouwd zoals hier is aangegeven).
<main>
<h1>Header met achtergrond<br>waar content overheen schuift III</h1>
<section>
<article>
<h3>Header</h3>
<p>Lorem ipsum...est laborum.</p>
</article>
<article>
<h3>Achtergrond</h3>
<p>Lorem ipsum...est laborum.</p>
</section>
.
.
.
</main>
Downloaden:
Druk op de knop:
File: voorb626.zip, 1735 bytes.
