Jump to content
Search Community

Parallax without modify height

medmedmed75 test
Moderator Tag

Recommended Posts

Hey everyone, 

I was inspired by that website parallax effect.

When i'm using parallax, i usually do a transform: translate3d(0, (val)px, 0) and height: 120% on the image in a container that have an overflow: hidden for masking. 

 

On the website I mention above, the translation has been executed on the container, himself wrap in an other div that have a mask. The image is never taller than the translated container div. 

 

Any idea to achieve that kind of results?

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Otherwise, we'll be happy to figure this out with you if you can mock up a minimal demo  of the effect. Give it an attempt and we'll be happy to take a look and advise.

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