Jump to content
Search Community

Fixed BG img on vertical scroll with related info displayed

HiLuLiT test
Moderator Tag

Recommended Posts

Hey all, 
I'm trying to build an image gallery - I want to scroll fixed images and I want the related text to scroll with it to.
I built this demo on codepen, I have 3 main elements: image, indiactor, and article. 
In the demo i'm able to change pictures, text and the Indicators change too (color change from grey to yellow).
But how do I make the text scroll on top of the background image? everything fades together with the background and I wasn't able to solve this...
Does anyone have any idea?

Thanks for the help!

See the Pen bGejGPQ by HiLuLiT (@HiLuLiT) on CodePen

Link to comment
Share on other sites

Hey Zach and thanks for the quick replay...
Currently the entire div (class="point") is fading on scroll while I'd like to achieve 2 animations on top of each other:
1. The background image should change  with fade out/in (that is already happening)
2. The titles should have a scroll effect on top of the background image without fading, just change color of title according to the current point in viewport.

I made a gif animation of what i'm trying to achieve:
giphy.gif
 

Link to comment
Share on other sites

I'm a bit confused. The .point elements are not animated at all. The article is but that's because you're telling it to in your tweens.

 

With that being said, the effect that you made in the demo is quite different than the effect that you show in the gif. Did you record that gif based on a website? If so can you share the URL with us? It'd help us help you create the effect more exactly.

 

Most likely it'd be best to create a set timeline with labels in between each section and then use a single ScrollTrigger to go through it. Or to use a library like Hammer.js to detect scrolling and have set animations between each section.

Link to comment
Share on other sites

Unfortunately I don't have a URL to share, that's the only reference I have....
And now when you mention it - you're right, I didn't notice I wasn't animating .point elements at all... I'll give it another try.

As for "set timeline with labels in between each section and then use a single ScrollTrigger to go through it. " - do you have an example for that maybe? i'm sorry i'm a bit new to this library... even a reference to read would be good... :)

Thanks again for all your help

 

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...