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:

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