Wat is parallax?

Wikipedia definieert parallax als ‘het verschijnsel dat de schijnbare positie van een voorwerp ten opzichte van een ander voorwerp en/of de achtergrond varieert als het vanuit verschillende posities bekeken wordt’. Objecten die ver weg zijn, bewegen langzamer dan objecten die dichtbij zijn. Hoe verder weg, hoe langzamer het beweegt.

Websites waarbij afbeeldingen of tekst en achtergrond over elkaar heen lijken te schuiven tijdens het scrollen door een site, zijn erg populair op dit moment. Ik wil je in dit bericht uitleggen hoe je dit effect kan toepassen op je eigen Divi website.

Parallax op je Divi website

Het is heel eenvoudig om parallax toe te passen op je Divi website. Allereerst plaats je een achtergrondafbeelding in een sectie. In de instellingen van het eerste tablad ‘inhoud’ of ‘content’ zet je parallax aan. Je kunt kiezen tussen ware of CSS parallax. Hieronder lees je het verschil tussen de twee varianten.

CSS

Kies je voor de CSS-optie, dan houdt CSS-code de achtergrond op haar plek. De voorgrond beweegt mee met de rest van je content.

Ware parallax

Ware parallax gebruikt CSS en JavaScript en laat beide lagen langzamer voorbij rollen dan de rest van je pagina, waarbij de voorgrond iets sneller beweegt dan de achtergrond.

Keuze: tekst of afbeelding?

Als je de juiste achtergrondinstellingen in de sectie hebt aangezet, is het tijd om de voorgrond in te stellen. Je kunt hierbij kiezen voor tekst, bijvoorbeeld met behulp van de ‘volle breedte header’ module, of voor een afbeelding. Zorg dat je tekst goed leesbaar blijft door bijvoorbeeld een semitransparante achtergrond voor je module te gebruiken.

Je kunt ook heel leuke effecten creëren met de afbeelding module. Wie een beetje handig is met Photoshop of een soortgelijk programma, kan zelf een voorgrond maken met transparante delen en deze opslaan als .png. Zo maak je spannende doorkijkjes en dit kan een heel speels effect geven. Op deze manier heb ik de header van dit bericht gemaakt.