Jump to content
Search Community

Scroll smoother Parallax header image

DeIndruk test
Moderator Tag

Recommended Posts

Hi There,

 

I am trying to create a parallax effect an a header image with scroll smoother like in the attached codepen.

 

This is my example where im trying to create this effect: https://dev.delfgou.nl/templates/content-template/

 

It looks like its not working because it arrives at its normal position in the document flow when it's centered vertically (the image above in the footer works). But i'm not 100% sure.

 

Is there a way to create the effect from the codepen?

 

Thanks!

Marc

See the Pen zppMBX by webmadewell (@webmadewell) on CodePen

Link to comment
Share on other sites

Hey! There's no GSAP in this pen for us to help you with,

 

But there's plenty of examples of parallax effects in the forums if you need a nudge in the right direction.

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

 

Also, for the record ScrollSmoother has a built-in parallax feature that allows you to simply set a data-speed attribute on any element to control how fast it scrolls. 

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