search

pixelcog / parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
MIT License
3.53k stars 838 forks source link

Multiple layers / multiple slides? #163

Open dschu-lab opened 8 years ago

dschu-lab commented 8 years ago

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 commented 7 years ago

Hi @dschu-lab, how you solved that?

dschu-lab commented 7 years ago

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 commented 7 years ago

thanks

theycallmepepper commented 7 years ago

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

wstoettinger commented 7 years ago

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.

ghost commented 6 years ago

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(...);
artbrander commented 5 years ago

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.