Header met achtergrond waar content overheen schuift II
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 schuift de titel naar boven en wordt de achtergrond bedekt door de content. De achtergrond scrollt een beetje mee, maar minder snel dan de content.
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-)apps van nos.nl en rijnmond.nl. Op de desktop-versies van deze apps ontbreekt
het effect.
Voor deze site heb ik het effect nagebouwd.
Een iets eenvoudiger uitvoering van dit effect vind je in het item Header
met achtergrond waar content overheen schuift. Daar beweegt de achtergrond niet mee met de content.
- 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.
- HTML
- De HTML van het voorbeeld bestaat uit een div-tag met id="scrollDiv" en een <main>-tag, die elk apart de hele <body> van het document bedekken. Met behulp van absolute positionering en z-index zijn die bovenop elkaar gelegd.
- scrollDiv bevat de achtergrondfoto. Omdat die 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 achtergrond behoort tot de div-tag.
- 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
- Allereerst wordt een beperkte reset toegepast op 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 bewegende achtergrondfoto zit in #scrollDiv. Deze is absoluut gepositioneerd op left:0. De eigenschap top is niet opgegeven en is daardoor bij het laden van de pagina gelijk aan nul. top wordt door JavaScript aangepast als er wordt gescrolled.
- #scrollDiv bedekt het hele window. De z-index is groter dan nul (in het voorbeeld: 10) om conflicten met de achtergrond van de body te vermijden. Verder is overflow-x: hidden ingesteld om te voorkomen dat er een horizontale schuifbalk ontstaat. Met transition: top 1s ease-out
- De main-sectie ligt bovenop de achtergrond in #scrollDiv. z-index is groter dan die van #scrollDiv
(in het voorbeeld: 100) om conflicten met de achtergrond van #scrollDiv 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
- Het Javascript wordt gebruikt het instellen van een drietal event-handlers, om te reageren op load, resize en scroll.
- De event-handlers worden gemaakt met addEventListener():
• load: Als de pagina is geladen wordt de breedte van het window bepaald en toegekend aan de breedte (width) van de foto, de hooget schaalt automatisch mee.
Ook wordt voor resize een handler gemaakt. Deze laat de pagina opnieuw openen als de afmetingen van het window worden veranderd. Hiermee wordt bereikt dat ook de foto opnieuw wordt verschaald.
• scroll: Als er wordt gescrolled wordt gekeken hoe ver er is gescrolled aan de hand van pageYOffset. Deze waarde wordt vermenigvuldigd met -0.5 en toegekend aan de top-warde van de achtergrond in scrollDiv. Bij scrollen naar beneden (het document gaat omhoog) is de YOffset positief. De achtergrond gaat naar boven, in de negative richting van top. Vandaar het min-teken.
- Toepassen in je eigen site
- Regel een geschikte achtergrondfoto. Die is voorkeur groter dan de beeldschermen waar die op wordt gebruikt. Om je een idee te geven: De foto van het voorbeeld is 4882 × 2292 pixels (Het verschalen wordt gedaan door de browser).
- Download de .zip-file en pak hem uit. Hernoem de file html600a.htm naar index.html of iets dergelijks.
- Zet de naam van je foto in de HTML zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Vervang de titel (<h1>) door je eigen versie. Vervang de inhoud van de <article>'s (<h3> en <p>) door je eigen tekst.
- Voeg <article>'s toe of verwijder ze juist.
- Pas de CSS aan aan je eigen wensen: Lettertype, karaktergrootte, kleuren, enz.
- Tenslotte
- Zorg er voor dat de titel niet kan wordt afgebroken als het window te smal wordt, want dan wordt het effect lelijk. De titel op deze pagina is eigenlijk te breed …
- Dit is bedoeld is voor gebruik in een groot window, zodat de foto tot zijn recht komt. Als dat niet kan zou je de afmetingen van de foto moeten kiezen aan de hand van de grootte van het window. Zie het item Responsive afbeeldingen voor informatie over hoe je dat zou kunnen doen.
- Het voorbeeld is minder geschikt voor gebruik in een frame.
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>
window.addEventListener("load", function() {
document.getElementById('scrollImg').style.width = window.innerWidth + "px";
window.addEventListener("resize", function() {
location.reload();
});
});
window.addEventListener("scroll", function() {
document.getElementById('scrollDiv').style.top = -0.5 * window.pageYOffset + "px";
});
</script>
(Zet dit in de <BODY>).
<div id="scrollDiv">
<img src="foto.jpg" id="scrollImg">
</div>
<main>
<h1>Header met achtergrond<br>
waar content overheen schuift</h1>
<section>
<article>
<h3>Header</h3>
<p>Lorem ipsum … … est laborum.</p>
</article>
<article>
<h3>Achtergrond</h3>
<p>Lorem ipsum … … est laborum.</p>
</article>
<article> … … </article>
<article> … … </article>
<article> … … </article>
</section>
</main>
Downloaden:
Druk op de knop:
File: voorb600.zip, 1265 bytes.
