kobracode Posted January 12, 2021 Share Posted January 12, 2021 Hello, i am trying to make the spacer section to be or look like fixed element and when you scroll the hero section overlap it, but as you way see the it doesn't work properly. See the Pen KKgGWaV by skigo (@skigo) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 12, 2021 Share Posted January 12, 2021 Hey @kobracode If you want that section to scroll over the previous one, you could/should set pinSpacing to false on that pin of that first section. If that is done, it still appears that the first section is above the second one on the z-index, so you'd have to specify a z-index for each of those sections (alongside adding a position: relative to them for it to work). Also an extra suggestion from my side would be to change the end of your ScrollTrigger to something bigger than "+=100%" or otherwise in this setup you will see a nasty color-block moving upwards through the opaque parts of your gradient there, when scrolling up and the first section unpins; I chose "+=300%" and it seems fine. See the Pen 1628807ac2fa27fb0e7fb81583171e84 by akapowl (@akapowl) on CodePen Hope this helps. Cheers, Paul 4 Link to comment Share on other sites More sharing options...
kobracode Posted January 13, 2021 Author Share Posted January 13, 2021 Hello @akapowl, take a look to the screenshot, i need when the section is in that view, color should be full.So i was thinking about if its available to change the background gradient to: default state (background: linear-gradient(0deg, rgba(217, 217, 214, 1) 55%, rgba(217, 217, 214, 0) 100%); and when is scrolling changing the (55%) value to 100% is that possible? See the Pen XWjxyOX by skigo (@skigo) on CodePen thanks Link to comment Share on other sites More sharing options...
akapowl Posted January 13, 2021 Share Posted January 13, 2021 I wansn't aware of that myself, but it looks like it should be possible See the Pen 961e70f99c88b5eb7abc0aa3463a218e by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now