Discuss

Applying Parallax Effect to Images

On this page

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:

Screenshot_1|690x417

Then add new dynamic attribute:

Screenshot_2|690x417

Open the Images category and select Image Parallax:

Screenshot_3|690x417

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:

Screenshot_4|690x417

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:

Screenshot_5|690x417

Select the parallax direction. For example: selecting Up means that when you scroll down, your image will go up:

Screenshot_6|690x417

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):

Screenshot_7|690x417

Overflow disabled:

1|506x500

Overflow enabled:

2|506x500