Zo gebruik je rellax.js met Divi binnen 5 minuten

Rellax.js is een stuk Javascript code die je kan toevoegen aan je website zodat je een scroll effect krijgt met elementen van de website. Rellax.js wordt gebruikt op verschillende websites. Een voorbeeld die waarschijnlijk iedereen met Divi kent is de ElegantThemes website.  In deze tutorial laten wij je zien hoe jij rellax.js kan gebruiken voor je volgende project.

Wanneer je nog niet zo goed bent met programmeren raden wij aan eerst even een back-up te maken van je website. Wanneer er dan iets niet goed gaat kan je altijd de back-up terugzetten zodat je website het blijft doen. Een back-up maken doe je op deze manier.

Stap 1: De bestanden aanroepen

De rellax.js bestanden kan je aanroepen door een stukje code toe te voegen in de Divi Thema opties.

1. Klik op Divi
2. Klik op integratie
3. Zoek naar ‘Voeg code toe aan de < head > van uw blog‘
4. Zorg dat ‘Schakel header code in‘ staat op ‘Inschakelen’.
5. <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.js"></script>

Kopieer en plak dan ook het volgende stukje code in de < head >

<script>
jQuery(document).ready(function($){
$('.speed1').attr('data-rellax-speed', '1'),
$('.speed2').attr('data-rellax-speed', '2'),
$('.speed3').attr('data-rellax-speed', '3'),
$('.speed4').attr('data-rellax-speed', '4'),
$('.speed5').attr('data-rellax-speed', '5'),
$('.speed').attr('data-rellax-speed', '6'),
$('.speed7').attr('data-rellax-speed', '7'),
$('.speed8').attr('data-rellax-speed', '8'),
$('.speed9').attr('data-rellax-speed', '9'),
$('.data10').attr('data-rellax-speed', '10'),
$('.speed-1').attr('data-rellax-speed', '-1'),
$('.speed-2').attr('data-rellax-speed', '-2'),
$('.speed-3').attr('data-rellax-speed', '-3'),
$('.speed-4').attr('data-rellax-speed', '-4'),
$('.speed-5').attr('data-rellax-speed', '-5'),
$('.speed-6').attr('data-rellax-speed', '-6'),
$('.speed-7').attr('data-rellax-speed', '-7'),
$('.speed-8').attr('data-rellax-speed', '-8'),
$('.speed-9').attr('data-rellax-speed', '-9'),
$('.speed-10').attr('data-rellax-speed', '-10');
});
</script>


Stap 2: Standaard instellingen

Wanneer bovenstaand stuk code is toegevoegd, zoek dan naar ‘Voeg code toe aan de < body > (goed voor het traceren van codes als Google Analytics)‘

Plak hier de code:

<script>
window.onload = function(){
var rellax = new Rellax('.rellax', {
speed: -2,
center: true,
round: true,
vertical: true,
horizontal: false});
}
</script>

Let op dit zijn de instellingen die voor ons prima werken. Je kan dit ook wijzigen. Voor meer informatie kijk naar de volgende pagina https://github.com/dixonandmoe/rellax

Stap 3: De code gebruiken in Divi Modules met een CSS-class

De code is nu goed geïmplementeerd op je Divi website. Het enige wat nu nog nodig is om het parallax effect te krijgen is het toevoegen van twee classes op een module, sectie of rij.

De eerste class die je moet toevoegen is rellax.

De andere class die je kan toevoegen is een van de volgende:

speed-10
speed-9
speed-8
speed-7
speed-6
speed-5
speed-4
speed-3
speed-2
speed-1
speed1
speed2
speed3
speed4
speed5
speed6
speed7
speed8
speed9
speed10

Als de class een – heeft zal het langzamer scrollen dan normaal. Wanneer de class geen – heeft zal het sneller scrollen.

En dat is het. Veel plezier met het gave scroll effect! Als je vragen hebt stel ze dan via het reageer formulier en wanneer je zelf de code hebt toegevoegd aan je website laat het dan weten! Dat lijkt ons erg leuk :).