Guest Posted January 12, 2020 Share Posted January 12, 2020 Hey everyone, I am trying to find examples of how the effect on large headline on the top here can be achieved. The text fades in with an elastic behaviour (skew). I thought it would be easy to find a CodePen example or a piece of code somewhere but I couldn't. Can you point me in the right direction? Ideally the text would reveal with scroll. Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 12, 2020 Share Posted January 12, 2020 Hey pkid and welcome. If you right click the element and inspect it using your dev tools you can see something like this: translate3d(0px, -0.0188vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0.00564deg) The only two values that change if you scroll the page are the y translation and the y skew. First, create an animation that changes the heading like you want it to. The only thing left to do at that point is attach the animation to the scroll position of the page. As for how to do that, there are lots of threads that can help: 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