Purpose:
Use this setting to turn on Parallax animation. Parallax is an effect where background and foreground elements move at different speeds as you scroll, creating a sense of depth and 3D layering.
Which blocks allow Parallax:
- Testimonial blocks - default and multiple
- Calculators
- Cards
- Section dividers
What is the specific behavior:
- Fixed - This is "false-parallax" where the image is larger than the space it is being shown. This is disabled on mobile because the image stays fixed.
- Scroll - This is true Parallax and enabled on all device sizes
- Hover - This relies on mouse movements so it does not work on mobile.
Steps:
- Add a block that allows Parallax
- Navigate to the "Advance settings"
- Select the Parallax type from the Background Attachment Select dropdown
Additional notes:
These will work best with the smallest image that gets the job done. Large images can cause some browsers to lag, especially if there multiple blocks on a page.
An ~1000px wide image seems to work well, but you should test layouts on mobile and desktop, and adjust image sizes accordingly.
Comments
Please sign in to leave a comment.