HomeBackground Motion Effects

Background Motion Effects

The Background Motion Effects feature allows you to animate the background of a Container, Section, or Column, adding dynamic interactions based on cursor movement or page scrolling. This feature is found in the Style tab under the Background section.

Where Can Background Motion Effects Be Applied?

The Background Motion Effects settings can be applied to:
  • Container
  • Section
  • Column

Enabling Background Motion Effects

  1. Navigate to the Style tab in the Container, Section, or Column where you want to apply the effect.
  2. Locate the Background section.
  3. Toggle Profecient Background Motion Effects to Yes to activate the feature.
  4. Adjust the Background Width and Background Height to control the size of the animated background.
  5. Fine-tune the background position using the Left and Top offset controls.

Additional Motion Effects

Along with Profecient Background Motion Effects, you can enable Mouse Effects and Parallax/Scrolling Effects for added interactivity:

Mouse Effects

  • Mouse Track – Moves the background based on cursor movement.
  • 3D Tilt – Applies a 3D depth effect when moving the cursor.
  • Transition – Adjusts the smoothness of the effect.

Parallax/Scrolling Effects

  • Horizontal Parallax (X) – Moves the background horizontally as the user scrolls.
  • Vertical Parallax (Y) – Moves the background vertically with scrolling.
  • Opacity – Changes the background transparency while scrolling.
  • Blur – Applies a dynamic blur effect.
  • Scale – Enlarges or shrinks the background dynamically.
  • Hue & Sepia – Modifies the background color dynamically.
  • Background Color & Border Color – Adds extra customization options.
  • Transition – Controls the animation smoothness.
By combining Profecient Background Motion Effects, Mouse Effects, and Parallax/Scrolling Effects, you can create highly interactive backgrounds that enhance user experience and engagement.