Search code examples
javascriptjquerycsstwitter-bootstrapparallax

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.

Solution

  • 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>