I need a step-by-step tutorial for getting a HEADER background to act as a parallax.
No matter what I do, it turns out awful. From immediately jumping to a 10% offset AFTER you scroll at all (setting offsets does not help one bit), to scrolling the wrong direction, to being cut off… this interface is just not intuitive AT ALL and no combination of changes that I’ve been able to think of trying has resulted in anything that would be acceptable.
I am having a similar problem, and I too gave up trying to get it to work, and I did look at the tutorial. I have header images that I would like to have simultaneously fade out as a parallax motion is applied once someone starts to scroll. (I’m trying to copy this effect: http://wsstinks.businesscatalyst.com/cavemen.html) Sorry to butt in here @Cricitem – I hope I’m not being rude – but I was glad to see someone else mention having problems with header background effects! I also spent a lot of time in frustration with this and didn’t find it very intuitive either. @PixelGeek your live stream looks very interesting, but it doesn’t seem like it will cover effects on a header background with scrolling… (rather than clicking or hovering)? At any rate, thanks.
If you go to the Parallax Header page, you can see the exact IX 2.0 settings required to make this work. You have to think that your hero is usually 100% in full view from the start, so bear this in mind when setting the 0%.
Feel free to check out the rest of the junk in there too.
Here’s a quick bit of help with this one. Take a look at your classes and how they’re structured too, you don’t need so many containers as it cam make re-arranging stuff in the future a bit tricky.
The bigger the element, the less you need.
So think like this on a standard basic page you might have;
Body x 1, Section x 3, containers x 3, div blocks x 10 (unlimited really), then all the content fits in those accordingly.
Hope this helps a little/a lot (delete as appropriate)!
Thank you so very much! As you might have guessed, I’m one of those traumatized Muse users who still haven’t a clue with Webflow. This is wonderfully helpful, and kind of you to have gone to so much effort. Thank you! (It’s actually the early morning hours here in California and my day is promising to be crazy, but as soon as I get a few minutes later, I will watch your video again and carefully rethink what I’m doing. I deeply appreciate this!)
No. You’ve got it setup exactly the same way I attempted to make this work. But the issue comes in when the hero is not 100vh, but 95 vh. And yours does the same thing mine did. There’s an immediate jump upon scrolling.
Hi @Cricitem Take a look again, as I changed it from an element trigger to a Page Trigger (which is what it should be for hero parallax) It’s exactly the same animation, but as I mention on the video for curious chip, page trigger is better.