Skip to main content

3D Parallax Image

Written by Bonzai

A motion-driven widget that creates a 3D depth effect by moving image based on user interaction (cursor movement on desktop or device tilt on mobile).

Tutorial Video:

Assets Required: ( single flat image )

  • Image(JPG/PNG/WebP/Gif)

Steps

  1. Add 3D Parallax Image widget to canvas

  2. Upload image

  3. Configure motion input (mouse / gyro)

  4. Adjust depth intensity and movement range

Properties
​

  1. Live Preview: Enable to see changes instantly on canvas

  2. Image: Upload image from the assets panel

  3. On Scroll: Enable parallax effect on scroll in preview

  4. Gyroscope Tilt (Mobile): Enable motion-based interaction on mobile devices

  5. Parallax Speed: Adjust depth movement intensity

  6. Background Properties: Customize background color, fill, or opacity

  7. Border Properties: Adjust border style, radius, and thickness
    ​

Inspirations

  1. Mcdonald's

  2. New Balance

Points to Note

  • Requires a single flat image

  • Performance depends on asset size

  • Gyro interaction requires device permission on mobile

  • Provide fallback (static image) for unsupported devices

  • Keep motion subtle for better user experience

  • Motion input type (mouse / gyro / both)

FAQs

  1. How many images are supported in the 3D parallax image format?

    Only one image is supported in the 3D Parallax image
    ​

  2. On mobile, is this parallax effect working on gyro?

    Yes, on a mobile phone, the parallax effect will work on Gyro.
    ​

  3. Can we control the Parallax speed / Intensity?

    Yes, we can control the speed / Intensity.
    ​

  4. Which format is supported for the 3D parallax image?

    3D parallax images are supported for all mobile, Tablet & desktop formats.

Did this answer your question?