Search code examples
jqueryhtmlscrollpositionparallax

How to implement parallax effect to different sections of a page?

I'm looking to implement a parallax effect on a website. I want to know if it's possible to implement this kind of scrolling effect on different parts of the page without affecting each other.

I created a little oversimplified example of what I want to do. I want the sprites (the red circles and green squares) to move upwards at a different rate than the actual background. However, the examples from a) and b) are in different DIV's, and they have irregular borders which are in another divs inside the same container. Like this:

<div id="section-1">
<div id="1-top"></div>
<div id="1-content"></div>
<div id="1-bottom"></div>
</div>

is there any way to move the sprites upwards through the div, and the border, but without being visible over the main background (blue in this case).

Would the squares in section b) move up to section a) or is there a way to limit how many pixels or percentage points the objects can move?.

Example

Solution

  • What you want to accomplish is very achievable using two scripts.

    Besides using a jQuery parallax script, you should use a jQuery Scrolling script to handle your red circles and green squares requirements.

    There are quite a few Demos to check out, and picking the right scrolling script should come before the parallax script, since those objects are contained inside the div's that the parallax would then move with the background.

    Since both scripts will be using event listeners for vertical/scrolling activity, they both will work in harmony to create the proper animations, with each script handling it's specific tasks.

    That alone allows for better flexibility as you then have two different API's for very specific functionality.

    Here's a recent SITE showing the latest plugins to get started on looking for the right scrolling and parallax script.