Multiple layers / multiple slides?

[dschu-lab]

Hey,
I really like this lightweight parallax lib. However, I'm trying to get multiple layers to work. Isn't that what the custom slides setup is for?

My setup is like this:

<section class="parallax-window" data-parallax="scroll" data-natural-width="2560" data-natural-height="1660" data-image-src="{{ asset('images/backgrounds/DP_Space.jpg') }}">
    <div class="parallax-slider">
        <img src="{{ asset('images/parallax/DP_Bildwelt06.png') }}" style="position: absolute; width:100%; margin: 0 auto; display: block;">
    </div>
</section>

But when adding the .parallax-slider inside the .parallax-window element, the image of .parallax-window doesn't get rendered / doesn't get transformed into a slide.

Is there no support for multiple layers?

[fitodac]

Hi @dschu-lab, how you solved that?

[dschu-lab]

Hi @fitodac, I'd love to help you, but since this issue didn't got answered, I ended up using only one image as background.

But you should check out p5js.

Here's a demo using p5js to create a parallax effect with multiple layers

[fitodac]

thanks

[theycallmepepper]

@mikegreiling Any solution for this? I'm seeing the same problem.

[wstoettinger]

this is not a feature the library currently supports. It would be an interesting addition though, with probably not so much additional code necessary, given the slides have the proper dimensions.

just as a side note: mixing the data-attributes markup and the html markup might lead to one overwriting the other.

I just came across this issue - two years too late - better late than never...

I solved it by removing the px.parallax data before attempting to add another parallax to the same element.

$element.parallax(...);

// If you need to access data before removing
// $element.data('px.parallax').doSomething();

$element.removeData('px.parallax');

$element.parallax(...);

Dunno if there's an "official" fix for this yet, but I managed to get layers working just by playing with data-mirror-selector and data-z-index.