Zo gebruik je rellax.js met Divi binnen 5 minuten

door | augustus 2, 2019 | Tips, Blog | 0 Reacties

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>

Zo gebruik je rellax.js met Divi binnen 5 minuten | rellax code divi 3

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>

Zo gebruik je rellax.js met Divi binnen 5 minuten | rellax js toevoegen divi 5

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

Zo gebruik je rellax.js met Divi binnen 5 minuten | rellax toevoegen body divi 7

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.

Zo gebruik je rellax.js met Divi binnen 5 minuten | rellax css class divi 9

 

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 :).

 

Anderen lezen ook:

Hoe kan je een backup maken van je WordPres website?

Hoe kan je een backup maken van je WordPres website?

Wanneer je een website hebt wil je natuurlijk dat deze altijd online staat. Nu kan het toch gebeuren dat op een of andere reden je website niet meer snel laadt of niet meer werkt zoals het altijd werkte. Door een backup te maken van je website krijg je de mogelijkheid...

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Ontvang gratis Tips & Tricks!

Ontvang gratis Tips & Tricks!

Schrijf je in voor de nieuwsbrief en ontvang af en toe een nieuwe e-mail met een tip of trick.

Je bent aangemeld! Nu alleen nog even je mail kijken en bevestigen.