Streaming live at 10am (PST)

Need BG parallax IX2 tutorial


#1

Tried searching. Can’t find anything.

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.


#2

I’ll go over this on our next Community live stream :slight_smile:

If you’re able to watch it live, I’ll post the recording here.


#3

Would be awesome, dude. I’ll tune in for sure. Thanks for the heads up!


#4

Hello @Cricitem

Can you share your read only link? Maybe I can help.


#5

I gave up on it. It was for a client project and I was under a deadline. Just ended up going with a fixed background.

I can’t figure out how to make it work correctly on ANY project, though.


#6

Sorry to hear that. Have you checked the parallax tutorial on Webflow University:

Anyway if you need a hand let me know.


#7

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.


#8

I’ve built a quick version, but not sure if it’s what you’re after @Cricitem and @CuriousChip

Read only:
https://preview.webflow.com/preview/magicians-sandbox?preview=454975d6856e10b34ae69debfe0f883f

It’s on the Parallax Header page

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.


#9

Thanks so much @markos84uk! Yes, that’s the effect I’m looking for. But I couldn’t get it to work. I have gone over and over your settings, but I’m sure I must be overlooking something. My read only link is: https://preview.webflow.com/preview/wss-1194ad?preview=38aff9555e6e1802cfc509f46af33b89

The link to the test site is: http://wss-1194ad.webflow.io/

Thanks for your help! I do appreciate it.


#10

Hi @CuriousChip

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.

CloudApp

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)! :smiley:


#11

Hi @markos84uk,

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!)


#12

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.


#13

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.

CloudApp

Sorry about that!