Applying Parallax Effect to Images
You can apply a parallax effect to the images on your page. The parallax effect applied to each of your images can be different and there are 8 different effects you can choose from.
Select your image, make sure this is an image on your page and not a background image applied via CSS:
Then add new dynamic attribute:
Open the Images category and select Image Parallax:
Enter a scale value, it should be more than 100. This option controls the parallax effect - higher values make the parallax effect more visible. However, higher values affect image quality as it scales the image:
Set a delay in milliseconds. When this option greater than 0, the translation of the image will continue after the uses stop scrolling. Play with some higher values (1000~1200) to see the nice effect:
Select the parallax direction. For example: selecting Up means that when you scroll down, your image will go up:
By default, when the overflow option is disabled your image will act like a background image in the container it’s placed into, without any overflow on the layout. Enabling overflow will translate the image out of its natural flow (see example gifs below):
Overflow disabled:
Overflow enabled:
