Achtergronden met parallax

In deze reeks wordt een 1 pagina document gemaakt. De inhoud is verdeeld in verschillende secties. Met jQuery en een voorbereid scriptje, zal het document bij scrollen de achtergronden verschillende snelheden kunnen geven. Stel je de snelheden goed in, dan kan er een waar parallax effect ontstaan.
Met parallax ervaart de kijker dat voorwerpen dichtbij sneller lijken te bewegen dan verder afgelegen objecten. Parallax versterkt dus het diepte-effect. Met de kennis van de fotografie (scherpte-diepte) kun je dat nog verder versterken.

De citaten komen in een HTML5 document. Elk citaat staat in een h3-tag en elke auteur in een paragraaf. Er is dus gekozen voor 5 sections. Sections vertegenwoordigen elementen, die een gelijkwaardige betekenis hebben.
Elke section krijgt een id, zodat ze voor het stijlblad te selecteren zijn.

In het stijlblad geven we de sections een flinke padding. Hierdoor komen de citaten binnen hun section meer geïsoleerd te staan. Ze vullen zo het venster. Het zou ook mogelijk zijn geweest de sections een vaste hoogte mee te geven en daarbinnen andere elementen te maken. Voor deze toepassing is de makkelijkste weg gekozen.
Ook de achtergronden worden geplaatst. als je ook transparante afbeeldingen daarvoor gebruikt, kun je meerdere achtergronden in een element plaatsen:
background: url(plaatje1.png), url(plaatje2.png), url(plaatje3.png);
De laatste afbeelding ligt hierbij onderop.
Voor de tekstopmaak wordt gebruik gemaakt van de webfonts van Google.
Bij elementen met een achtergrondafbeelding moet de tekstkleur ook vaak worden aangepast.

Voor de parallax is een scriptje te downloaden.
Plaats dit samen met een verwijzing naar jQuery vlak voor de body-tag sluit.
Deze heeft data-attributen nodig. HTML5 biedt de optie om data-attributen in tags op te nemen, die informatie meegeven voor scripts. Hier zijn er minstens 2 nodig:
data-type="achtergrond" en data-snelheid="2". Het tweede attribuut heeft een getal als waarde. Deze geeft feitelijke vertraging van de achtergrond bij het scrollen weer. Een element met data-snelheid="5" scrollt dus langzamer dan een met data-snelheid="2".

De achtergronden herhalen zichzelf. Bij sommige achtergrond afbeeldingen is het hinderlijk dat de overgang tussen twee herhalende beelden zichtbaar wordt. Dit is te verhelpen door nog een derde data-attribuut mee te geven: data-offset="123", waarbij 123 het aantal pixels is dat de achtergrond naar beneden moet verschuiven.
Bij meerdere achtergronden, kun je ook meerdere verschillende snelheden meegeven.

Bij het toevoegen van een menu met interne linken naar de verschillende secties, zorgt het script dat de overgang vloeiend verloopt.
Met opzet wordt het menu als laatste in de body toegevoegd. Als de positie daarna bovenaan de pagina gefixeerd wordt, schuift de inhoud er onder door.

Het menu krijgt een gefixeerde positie met waarde voor top die 0 wordt. Dan schoolt de inhoud er netjes onder door.
Het menu wordt net zo breed als de pagina gemaakt. Achtergrond deels transparant en een box-shadow voor extra diepte-effect.
Het menu is een opsomming. De list-style wordt verwijderd, de marges en paddings van de opsomming moeten ook verdwijnen.
De items zijn nu goed te manipuleren en worden naast elkaar geplaatst met inline-block voor de display-eigenschap...
Tot slot worden de teksten in de links zelf opgemaakt en de variant van de roll-over opgemaakt.