Bassie Bassie - 6 months ago 18
jQuery Question

How to Add a Parallax Image Inside a Parallax Row

I am trying to implement a parallax which contains another image inside which also has the parallax effect where they both move at different speeds.

I have had some success, but it only seems to work on screens narrower than 816px this is what it looks like when I scroll to that area:

enter image description here

And here is what it looks like when the width is over 816px:

enter image description here

Not sure if anyone will be able to help with this specifically, but would love to know if there is a "right" way of achieving this, or if there are any implementations/plugins available.

I am using the bootstrap framework for the rest of the site (got the feeling that the responsiveness is pushing the inner image down).

Here is the code:

html

<div class="container-fluid" style="padding:0px;">
<div class="parallax-window"
data-parallax="scroll"
data-image-src="Phonehand.png"
data-position-y="500px"
data-speed="0.3">
<div class="parallax-window" data-parallax="scroll" data-image-src="Chrysanthemum.jpg" data-speed="0.8" >
</div>
</div>
</div>


css

.parallax-window {
width: 100%;
min-height: 400px;
background: transparent;
}


javascript

I am using the
Parallax.js
plugin from here

Any help on this is much appreciated and please let me know if I can provide a more details.

Answer

I was able to resolve this by changing data-position-y to 100px:

<div class="container-fluid" style="padding:0px;">
<div class="parallax-window" 
     data-parallax="scroll" 
     data-image-src="Phonehand.png"
     data-position-y="100px"
     data-speed="0.3">
    <div class="parallax-window" data-parallax="scroll" data-image-src="Chrysanthemum.jpg" data-speed="0.8" >
    </div>
</div>