Zo gebruik je rellax.js met Divi binnen 5 minuten

door | augustus 2, 2019 | Tips, Blog, Tutorial, WordPress | 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>

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

 

Anderen lezen ook:

Zo maakt je een live chat functie op je WordPress website met Divi

Wil jij een live chat functie hebben op je website? In deze blogpost laten wij je zien hoe je zelf, gemakkelijk een live chat aan je WordPress website toe kunt voegen. Waarschijnlijk heb je het tijdens het surfen op het internet al wel eens gezien. Ergens onderin de...

Nadelen van een standaard WordPress thema

Nadelen van een standaard WordPress thema

Natuurlijk houden wij onwijs van WordPress. En dat heeft zijn redenen, WordPress is gewoon briljant omdat je er zoveel mee kan doen. Daarnaast zijn er altijd mensen bezig met het verder ontwikkelen van functionaliteiten, plugins, thema's of beveiligingsupdates. Bij...

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.