Background Parallax IX2

Design help Animations & Interactions
1

Hi,

I am just finding the time to learn IX2 and have nailed the parallax effects for individual items within a section, but how do I apply the same parallax effect to the section itself (that has a background image attached) so that the image slowly moves up the page when scrolling down?

Just can’t see any documentation for that.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You always need a parent wrapper on which the parallax item scrolls and to that wrapper the interaction should be applied. In your case it may be body itself. Your link doesn’t work so not sure about that.

3

Hi Dram,

Thanks, I’ve included a preview link now. I am trying to animate the large background image with parallax. I applied an interaction to the body targeting the background image and it sort of worked but started cutting off the image at the top. I have since deleted the interaction.

Any help greatly appreciated.

4

OK, here are the changes that will make it work:

  1. body - clear height ( now auto)
  2. add some div after your parallax images and give it some fixed height (to simulate longer page we need for parallax). Ex. 200vh
  3. now create ix on body. Parameters: while scrolling in view, start animation when element is fully visible (we start our page with your image fully visible, see?), select hp-image-wrapper, at 0% move it to 0vh vertically, at 100% move it to, say, 70vh down (this will make it move slower)

it will work. Now tweak however you like

1 Like
5

Cheers Dram,

I did what you said and couldn’t get it to work…until…I set the bg image as ‘fixed’ then it magically started working. Thanks so much for taking the time to help me out.

Looks great in Chrome/Opera/Safari but in Firefox the effect is negligible. Is that a known issue?

6

It didn’t work since you set the move transform at 100% to -70vh (move up), while it should be just 70vh (move down). But this would move the whole image container of course. If you actually wanted the image to be cut out to get a “window” effect on it then setting it fixed is one of the ways to do it, yes.

Not sure why it doesn’t work in ff (i don’t see any effect honestly, not just negligible), perhaps you should redo it without resorting to background images and just placing large absolutely positioned image inside and make use of overflow:hidden on the wrapper.

7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.