Jump to content
Search Community

Scrolltrigger Horizontal Scroll with Parallax Background Image

17526_1494126625 test
Moderator Tag

Recommended Posts

Hey guys, I was wondering if someone could give me some assistance on this project I'm working on.  

 

The project is a horizontal scrolling page with 6 panels.  Each panel will have different content (images and text).  

 

When the user scrolls with their mouse, I would like the panels look like they're scrolling horizontally, BUT the background image of the wrapper needs to change background position throughout.  

 

I have the first part working well(horizontal scrolling panel), but the scrolltriggered background image of the wrapper is not functioning correctly.  

 

Any help would be appreciated.

 

One last thing, if someone can tell me how to keep this same effect while tablet swiping, I would really appreciate it.  Thanks.

See the Pen YzNJvYB by jdelatorre312 (@jdelatorre312) on CodePen

Link to comment
Share on other sites

10 hours ago, 17526_1494126625 said:

the scrolltriggered background image of the wrapper is not functioning correctly.  

I think it's because you've got it set to "cover" and then you're trying to use percentages which will always match up anyway. Here's an excerpt from MDN docs

Quote

The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the right (or bottom) edge of the background image is aligned with the right (or bottom) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, background-position: 25% 75% means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.

So maybe you'd want to switch to px or something. 

 

I'd personally avoid background-image animation because from my understanding, it's not accelerated and some browsers apply pixel snapping which means it can look jerky. Instead, I'd put an actual image behind there and use transforms to move it around. But that's just me :)

 

10 hours ago, 17526_1494126625 said:

One last thing, if someone can tell me how to keep this same effect while tablet swiping, I would really appreciate it.  Thanks.

Are you saying that when you scroll down on a tablet, it doesn't work? Or are you saying that you want to also allow horizontal swiping? If so, that could be done using Draggable. 

  • Like 1
Link to comment
Share on other sites

7 hours ago, GreenSock said:

I think it's because you've got it set to "cover" and then you're trying to use percentages which will always match up anyway. Here's an excerpt from MDN docs

So maybe you'd want to switch to px or something. 

 

I'd personally avoid background-image animation because from my understanding, it's not accelerated and some browsers apply pixel snapping which means it can look jerky. Instead, I'd put an actual image behind there and use transforms to move it around. But that's just me :)

 

Are you saying that when you scroll down on a tablet, it doesn't work? Or are you saying that you want to also allow horizontal swiping? If so, that could be done using Draggable. 

Hey thanks for the response.  Are you recommending having the image behind everything and transforming it with css?  Inline?

Link to comment
Share on other sites

  • 2 weeks later...

 

OK, thank you for your help.  I have everything working, but when the user drags the screen, it doesn't update the scrolltrigger offset and people are dragging/swiping past the last div.  

 

If I scroll all the way through it stops on the last div as it should.

Edited by akapowl
Failed embed of codepen demo
Link to comment
Share on other sites

You don't need to copy/paste all that embed code into the forums here - just paste the CodePen URL and the forums will automatically embed it. 

 

As for your question, I think it's logic issues in the way you're setting it up - I'd probably use a proxy that, when you drag it, would scroll the page so that it's always perfectly synchronized with the scroll position. Otherwise, if you drag halfway, for example, the scrollbar may still be all the way at the top which is weird, and then what'd happen when the user starts to scroll? Or maybe I misunderstood your question. 

Link to comment
Share on other sites

8 hours ago, GreenSock said:

You don't need to copy/paste all that embed code into the forums here - just paste the CodePen URL and the forums will automatically embed it. 

 

I just mopped through :) 

 

 

Quote

Hi is there a simple example on how to setup a proxy?

  

Here you go @17526_1494126625

 

From the ScrollTrigger How-to-Pens collection on codepen

 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen

 

  • Like 1
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...