Multi-laags Parallax effect in Divi

door Maarten Hogeveen | 9 december 2019

Inleiding

Het parallax effect is een populaire manier om webpagina’s een dynamischer gevoel te geven. Een parallax achtergrond is een achtergrond die vastgezet is in een ander diepte vlak is vastgezet, waardoor het lijkt alsof de achtergrond niet of op een andere snelheid scrollt tegenover de rest van de pagina. Normaal gesproken wordt dit gedaan met een enkele achtergrond, maar het is mogelijk om met een paar regels JavaScript (JS) een multi-laagse parallax achtergrond te maken. Het voorbeeld wat hier beschreven gaat worden is specifiek voor Divi gemaakt, maar het principe is voor veel breder gebruik mogelijk.

Er zijn drie onderdelen in het maken van een multi-laags parallax achtergrond. HTML, JavaScript en CSS. Het hieronder gemaakte voorbeeld zal volgens deze volgorde opgebouwd worden.

Onderaan de pagina vindt je een CodePen met makkelijk kopieerbare code en het resultaat.

De HTML

Er worden twee versies van de HTML gemaakt. Eén voor de desktop versie en één voor de mobiele versie van de website.

De HTML wordt in een code module gezet.

1 <div class=”wikkel_parallax”>
2 <div class=”laag_1″>
3 </div>
4 <div class=”laag_2″>
5 </div>
6 <div class=”laag_3″>
7 </div>
8 </div>
9
10 <div class=”wikkel_mobiel”>
11 <div class=”laag_1″>
12 </div>
13 <div class=”laag_2″>
14 </div>
15 <div class=”laag_3″>
16 </div>
17 </div>

De JavaScript

De JavaScript voor de multi-laags parallax achtergrond kan ook in de code module onder de HTML geplaatst worden.

Deze JavaScript code maakt gebruik van jQuery. Dit is standaard ingebouwd in WordPress, dus daar hoeft u zich verder geen zorgen over te maken. Mocht u geen WordPress gebruiken, dan kunt u hier terecht voor instructies voor het installeren van jQuery. De makkelijkste manier is het gebruik maken van de CDN optie.

De JavaScript is de plek om de snelheden waarop de achtergronden bewegen te wijzigen. Het gaat hier om het getal achter ‘vensterScroll/’ op lijn 7, 10 en 13. Als dit getal hoger gemaakt wordt, dan zal de betreffende laag langzamer bewegen. Als dit getal lager wordt gemaakt, dan zal de betreffende laag sneller gaan bewegen. Hier kun je even mee spelen om het gewenste effect te krijgen.

1 <script>
2 window.addEventListener(‘scroll’, scrollFunctie);
3 function scrollFunctie() {
4 let vensterScroll = this.scrollY;
5
6 let $laag1 = document.getElementsByClassName(‘laag_1’)[0];
7 $laag1.style.transform = ‘translateY(‘ + vensterScroll/10 + ‘%)’;
8
let $laag2 = document.getElementsByClassName(‘laag_2’)[0];
10 $laag2.style.transform = ‘translateY(‘ + vensterScroll/4 + ‘%)’;
11
12 let $laag3 = document.getElementsByClassName(‘laag_3’)[0];
13 $laag3.style.transform = ‘translateY(‘ + vensterScroll/9 + ‘%)’;
14 }
15 </script>

De CSS

De laatste stap is het toevoegen van de CSS. Het is het makkelijkst om dit toe te voegen in het aangepaste CSS veld van de pagina. (Als je niet weet waar je dit kan vinden is dit een mooie plek om daar meer over te lezen.)

In de CSS valt een boel aan te passen, zodat het perfect past bij de stijl van je website. Je kan het natuurlijk ook zo overnemen. Het enige wat in beide gevallen moet gebeuren, is het invullen van de plek waar de afbeeldingen zich bevinden tussen de haakjes van de src() waarde op lijn 20, 24, en 28. Dit kunnen locale bestanden zijn (op de hosting server) of url’s.

Om de volgorde van de lagen te wijzigen, moeten de waarden van de z-index veranderd worden. Hoe hoger hoe meer de laag ‘naar voren’ komt. Hou hier het liefst waarden tussen de 1 en 10 aan.

1 .wikkel_parallax, .wikkel_mobiel {
2width: 100%;
3height: 450px;
4position: relative;
5background-size: contain;
6background-attachment: fixed;
7overflow: hidden;
8}
9.wikkel_mobiel {
10display: none;
11 }
12 .laag_1, .laag_2, .laag_3 {
13 background-repeat: no-repeat;
14 background-size: contain;
15 position: absolute;
16 height: 100%;
17 width: 100%;
18 }
19 .laag_1 {
20 background-image: src();
21 z-index: 3;
22 }
23 .laag_2 {
24 background-image: src();
25 z-index: 2;
26 }
27 .laag_3 {
28 background-image: src();
29 z-index: 1;
30 }
31 @media (max-width: 980px) {
32 .wikkel_parallax {
33 display: none;
34 }
35 .wikkel_mobiel {
36 display: block;
37 }
38 }

Het Resultaat

Hieronder is het resultaat te zien. De code is hieruit makkelijk te kopieren.

Als je met deze basis een mooi product heb gemaakt, laat het me weten op Instagram!