In this documentation, we will cover how to customize the Text Animation Extension, a Pro feature provided by Zoloblocks.

What is Background Parallax?

The Background Parallax extension of ZoloBlocks allows you to create visually engaging scrolling effects by giving background images a smooth, dynamic motion as users navigate the page. This effect adds depth and interactivity to your website sections, making them more immersive and modern. You can easily control the parallax speed, direction, and style directly from the settings panel—no custom code required.

Enable The Background Parallax Extension

To use the Background Parallax Extension from Zoloblocks, first, you have to enable the extension.

1. Go to WordPress dashboard > Zoloblocks Plugin dashboard.
2. Then, Click the Extensions Tab.
3. Search for the Background Parallax extension Name.
4. Enable the Background Parallax extension.
5. Hit the Save Settings Button.

Start With Any Design to Use the Background Parallax Extension

To get started with the feature, let’s first use an existing design on the page. This helps to better understand how the feature functions. Here, I’ve set up a container. In this container, I’ve added one advanced heading element with a subheading and a heading, an advanced paragraph, an advanced button and a background image to showcase the effect in action.

Where To Find the Background Parallax Extension

After creating an existing design, you have to select the container where you have added the background image and do the following – 

1. Click on the Block Tab.
2. Then, click on the Extra Tab.
3. Select the Background option.
4. Now, in the Background option, you will get the Background Parallax option. Click on it to enable the option.

Let’s Explore the Text Animation Extension

1. Split Type: This setting adds an interactive visual effect. For example, when a user scrolls their mouse over a hero section, the background image subtly moves in the selected direction, enhancing depth and engagement. There are some directions included. These are – 

• Right: Background image shifts to the right.
• Left: Background image shifts to the left.
• Up: Background image shifts upward.
• Down: Background image shifts downward.
• Up Left: Background image shifts upward and to the left.
• Up Right: Background image shifts upward and to the right.
• Down Left: Background image shifts downward and to the left.
• Down Right: Background image shifts downward and to the right.

2. Scale: It controls how much the background image zooms in or out during the scroll effect. Higher value means more zoom and the default is usually 1 (original size).

3. Delay: You can use this option to set the transition duration (in seconds) for the parallax animation to complete when scrolling. Higher value means slower animation and the lower value means faster animation.

All done! You have successfully customized the Background Parallax extension on your page. 

Video Assist

The video is coming soon. Please visit the demo page for examples.

Thanks for being with us.