Header met achtergrond waar content overheen schuift
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.
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 rubriek 'Specials' op de website van het KNMI in De Bilt. Om het origineel in actie te
zien volg je deze link.
Voor deze website heb ik het nagebouwd.
- 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 en CSS (in de file styles.CSS). JavaScript wordt niet gebruikt.
- HTML
- De HTML van het voorbeeld is een enkele <main>-tag, die de hele <body> van het document bedekt. In feite wordt de <main>-tag gebruikt als container, dus om de boel bij elkaar te houden.
- Binnen de <main> bevindt zich alle content van het document. Je kunt daar alle geldige HTML gebruiken.
- De achtergrond behoort tot de <body>.
- 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 en de achtergrond worden ingesteld. De achtergrond kan niet verplaatsen en wordt uitgerekt over het hele document.
- 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.
- 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 html300a.htm naar index.html of iets dergelijks.
- Zet de naam van je foto in de CSS: background: url('foto.jpg') (regel 8 in de file styles.css). 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
- 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.
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>).
<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: voorb300.zip, 1299 bytes.
Opmerking:
Een versie van deze techniek waarin de foto ook mee scrollt (maar langzamer dan de content) vind je in het item
Header met achtergrond waar content overheen schuift II.
