Background Parallax IX2

[Golden28 (Neil Newnham)]

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)

[dram (Alex Dram)]

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.

[Golden28 (Neil Newnham)]

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.

[dram (Alex Dram)]

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

[Golden28 (Neil Newnham)]

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?

[dram (Alex Dram)]

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.