Skip to main content

Parallax effect on sections

Add a parallax scroll effect to a section background image. How to enable it and browser performance considerations.

Written by Troy Villasanta

Parallax effect gives the background content a different scrolling speed as the foreground moves. This effect can be implemented in your Zoomforth site through CSS classes. More information about using CSS classes can be found in this article.

The CSS class below can be used to give a parallax effect to your target content:

.parallax { 

background-attachment: fixed;

}

There are two ways to add the custom CSS so the site can use it:

Once the CSS class has been made available for use, you can then associate it with your target content via the site editor.

In the example below, the CSS class parallax is added in the site editor's custom CSS editor and is applied to the background image of the hero section.

Did this answer your question?