Jump to content
Search Community

Parallax img not working properly

Shehzad Asif test
Moderator Tag

Recommended Posts

Hy There

 

I am on the learning road of gsap and often faces  some problems I could not solve myself. Any how the problem is, parallax images works but their start/ end position is not working properly as in the demo, parallax effect stop working before end mark or after start mark.  If I do the same thing with some content over background image or with other properties like scaling, fading, these effects totally work fine from top to bottom but if I have only background image or only image it will not work x and y axis from top to bottom

As you can see in the demo the image is moving only from the bottom but not from the top. Any help how to do this.

 

Regards,

Shehzad Asif

See the Pen oNLgQeZ?editors=0001 by ShehzadAsif (@ShehzadAsif) on CodePen

Link to comment
Share on other sites

Hey Shehzad. This is working exactly correctly. The only issue is that you have extra space at the top (between the top of the container and the top of the image) so the image isn't being cut off, thus making the translation hard to perceive. Set background: black; on .img-wrapper to see what I mean. 

 

There are a lot of potential ways to fix this depending on what sort of effect you want. 

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