Jump to content
Search Community

ScrollTrigger & Parallax Backgrounds: How to avoid white around the image

JulieAutobots test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello! I'm trying to get ScrollTrigger-powered parallax background images to cooperate, and would appreciate a nudge in the right direction. Basically what I've noticed is that if the section with the parallax background image isn't 100% of the viewport height, and/or the background images given are inconsistent sizes across different sections, I end up seeing white around the edges of the image.

 

I'm following the parallax background demo code closely, so I modified that codepen to demonstrate the issue I'm facing. All I changed were the dimensions of the picsum background images, and the section height from 100vh to 60vh. As you scroll through, you should be able to see white peeking around the top and/or bottom of the images depending on your screen size. 

 

Is there any way to make sure this doesn't happen? I can't rely on consistent section heights or background image dimensions.

 

Thank you!

See the Pen bGLQoyV by jbarkun (@jbarkun) on CodePen

Link to comment
Share on other sites

  • 9 months later...

Great catch, @Sgt. Red Pepper. That's because when you go to an extreme enough portrait aspect ratio, there's not enough image due to the background-size being set to cover. The images get set to match exactly what their parent section is, thus there's no extra for it to expose for parallax. 

 

I've updated the original to use a completely different technique:

See the Pen rNJQPXz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There's a helper function that basically resizes the background images in a way that ensures there's enough of an overlap to work with, and you can change the "movementFactor" variable to control how much the backgrounds move. You can even set it to a negative value to invert the direction. 

 

Better? 

 

Here's the OLD one for reference (DO NOT USE THIS)

See the Pen QWZyyBK?editors=0110 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...