Why does the image crop when setting parallax scrolling effect?

Show and tell
, ,
1

Parallax effect causes the image and the page to move at different speeds while scrolling. This creates depth and movement to your design.

When parallax is enabled, the image is zoomed in (x1.5) and its position inside the bounding box is set to top. This ensures that the image has content below to scroll with the parallax effect.

Expert tip: It’s best to use images that don’t have specific details on the edges that you don’t want to get cropped during the effect. Depending on the aspect ratio of the image file and image component, parts of the image may be cut off, and some parts of the image may only be revealed as you scroll.

See Gif:

https://static.wixstatic.com/media/a27d24_5900a01b04d3451f83614c401b192b3a~mv2.gif(image larger than 4 MB)

If you have any questions or other tips to share please comment below.

5 Likes
2

Thanks for addressing this! I always wondered how the original Editor figured out where to crop and position a parallax image. Your GIF explains the function perfectly for people who need visuals to learn – just like me! :wink: Now about that Reveal function…? Got a GIF for how that works, too?

3

Is there a way to set the position inside the bounding box to be the middle of the picture rather than at the top? So when the section is centered vertically in the middle of the screen then the image in parallax would also be showing the vertical center of the picture?

4

Sure would be great if we could set the speed of the parallax…and also…if we could actually just set the x, y, and z positions with an “interaction” on scroll…