â–Ľ
Streaming live at 10am (PST)

Having issues with parallax header

Design help Animations & Interactions
#1

So I designed a scrolling parallax header that looks great, but when I published it, some of the elements that are extended past the view window, force the whole thing to get bigger. Like I have elements that are enlarged beyond the view window and a scroll bar appears on the bottom so I can scroll and see the enlarged elements, they also extend lower so it shows space under my footer as well. I was wondering if there is a way that when the element is out of the view window to get it to just not affect the page size.

It is the design page that is having the issue.
Thanks.

This is my share link but I am also posting the published link so you can see what I am talking about.

1 Like
#2

Hey @Spencer_Dumond

You use overflow hidden, but will be better to share your read-only link so I can take a look.

Piter :webflow_heart:

#3

You basically select the section that has overflowing content and give it the following settings.

image
image.jpg551Ă—798 138 KB

#4

share only: https://preview.webflow.com/preview/cblue-printers?utm_source=cblue-printers&preview=b7c6f9db0ef18aab521f034e507ec4d2

this is where you can actually see the issue.

published: http://cblue-printers.webflow.io/design

#5

I though that would work and try it and it still didn’t

#6

Do the following.

Body 6> Overflow : Hidden
Paralax Header Section > Position : Relative

Let me know if it works

#7

it wont let me scroll down now when I publish it.

#8

Oops, my mistake! We probably don’t want to mess with the body element.

Instead of " Body 6 > Overflow: Hidden "_ make Parallax Header Section > Overflow: Hidden, and keep its position "RELATIVE. I tested it here and it worked.

1 Like
#9

thanks man that worked perfectly. I tried making the the overflow of the parallax header section hidden but had its position at static and I think making it relative made the difference.
Mad kuddos for the help.
How do you think the parallax looks?

1 Like
#10

Hahah, thank you for your appreciation. You will always want to check the position settings when you have elements moving around. That little box “relative to” is what showed me where the problem was.

You parallax looks amazing. It stuttered a bit when I opened it on chrome, but when I used Firefox it was super smooth. I don’t know what’s happening with my GC.

Little tip: If you can make those trees at the background a little bit less blurry, it would be nice. Sometimes it gives the impression that they are blurry because of a low-res image, even though I know that this isn’t true.

I’m glad I could help.

Happy Designs.