Running multiple scenes at once

[farhoudz]

I have a one-page web project containing four sections and so far using your amazing library I have written this code before the closing body tag :

var firstScene = document.getElementById('first-scene');
var firstParallax = new Parallax(firstScene);

var secondScene = document.getElementById('second-scene');
var secondParallax = new Parallax(secondScene);

var thirdScene = document.getElementById('third-scene');
var thirdParallax = new Parallax(thirdScene);

var fourthScene = document.getElementById('fourth-scene');
var fourthParallax = new Parallax(fourthScene);

My question is that is it possible to call all for scenes in one new parallax ? also when I put this code in an external js file it does not run at all, why?

Thanks in advance

[sidonaldson]

@farhoudz did you get anywhere with this? I'm considering this solution too. It won't work with relative bounds but if the CSS is set up right and parallax is invoked on a parent element it should work

[Gil-Goldshlager]

You need to create an array, and then loop all scenes:

Set an array and select all the scenes as:

var scenes = [];
var scenesSelector = document.querySelectorAll('.scene');

Then run a loop:

for(i=0; i<scenesSelector.length; i++){
    scenes[i] = new Parallax(scenesSelector[i]);
}

Later if and you want to be able to disable/enable all of them together then create a function for that as:

function scenesDisable(){
    for(i=0; i<scenes.length; i++){
        scenes[i].disable();
    }
}

function scenesEnable(){
    for(i=0; i<scenes.length; i++){
        scenes[i].enable();
    }
}

[vivekkupadhyay]

@Gil-Goldshlager thanks a lot, it really worked for me. 💯

[satiroglumustafa]

Thanks a lot, I used swiper slide and doesnt work for every slide item parallax.js, but this solution worked for me

[santiagosj]

I`m wondering how to get multiple scenes but in reactjs..