Animated Backgrounds

Demo to preview the settings

Introduction

12 Themes!
Animated website backgrounds for full body or simple group with full customization.
Easy to use!
Can interact with mouse / touch
Customize colors & style to match your brand
No pixelation – Canvas runs at full resolution
Smaller filesize than background videos and large Background images – three.js is ~120kb minified and gzipped
Runs fast (60fps) on most laptops/desktops
❗
Disclaimer: Some WebGL effects are slow on older computers. Not all effects work on mobile devices. Set a background image or color as a fallback.
This plugin is based on Vanta.js

How to setup

  1. Install plugin and put "Animated Background" element on your page.
  1. Open Settings -> General tab and check the mark (βœ”) "Expose the option to add an ID attribute to HTML elements".
  1. Add ID attribute (simple word) to group or page in the field "ID Attribute" at the end of the list.
  1. Write the above group ID in the plugin element field "Element ID".
  1. Enjoy!

Plugin Elements Properties

This plugin has one visual element which can be used on the page: Animated Background.

Animated Background

Create animated backgrounds.
Image without caption

Element Fields

Title
Description
Type
Theme
Allows to select an animated theme.
Dropdown
Element ID
The element id that should have an animated background.
text
Mouse Controls
Allows mouse controls.
Checkbox
Touch Controls
Allows touch controls. It is used for mobile devices.
Checkbox
Gyro Controls
Allows the gyroscope to imitate the mouse. It is used for mobile devices.
Checkbox
Minimum Height
The minimum height of the animated background. Expressed in pixels.
number
Minimum Width
The minimum width of the animated background. Expressed in pixels.
number
Scale
The scale of background.
number
Scale Mobile
The scale of background on mobile devices.
number
Background Color
The background color of the animation. This color is used for Halo, Dots, Trunk, Net, Globe, Clouds, and Birds themes.
Color
Color
The color of dots in Dots, lines & dots in Net, globe lines in Globe, wave in Waves.
Color
Color 1
The color of lines in Trunk, cells in Cells, birds in Birds.
Color
Color 2
The color of lines in Dots, cells in Cells, orbital lines in Globe, birds in Birds.
Color
Size (Halo)
The size of the β€œHalo” circle. Accepted values between 0.1 and 3.
number
Base Color (Halo)
The color for the inner circle.
Color
Amplitude Factor
Defines the curviness of the inner circle line. Accepted values between 0 and 3.
number
x Offset
The offset on the X-axis from the center of the element. Accepted values between -0.5 and 0.5.
number
y Offset
The offset on the Y-axis from the center of the element. Accepted values between -0.5 and 0.5.
number
Size Dots
The size of animated dots. Accepted values between 0.5 and 10.
number
Spacing Dots
The space between animated dots. Accepted values between 5 and 100.
number
Spacing (Trunk)
The space between animated lines. Accepted values between 0 and 10.
number
Chaos
The curviness of animated lines. Accepted values between 0 and 10.
number
Size (Cells)
The size of cells. Accepted values between 0.2 and 5.
number
Speed (Cells)
The speed of animation. Accepted values between 0 and 5.
number
Points
The number of animated points. Accepted values between 1 and 20.
number
Max Distance
The number of lines between points. Accepted values between 10 and 40.
number
Spacing (Net)
The space between lines. Accepted values between 10 and 20.
number
Show Dots
Enables the dots displaying on points places.
Checkbox
Size (Globe)
The size of the globe. Accepted values between 0.5 and 2.
number
Sky Color
The color of the sky.
Color
Cloud Color
The color of clouds.
Color
Cloud Shadow Color
The color of clouds shadow.
Color
Sun Color
The color of the sun.
Color
Sun Glare Color
The color of the sun glare.
Color
Sunlight Color
The color of sunlight.
Color
Speed Cloud
The speed of clouds animation. Accepted values between 0 and 3.
number
Shininess
The amount of shininess. Accepted values between 0 and 150.
number
Wave Height
The height of waves. Accepted values between 0 and 40.
number
Wave Speed
The speed of waves. Accepted values between 0 and 2.
number
Wave Zoom
The animation zoom. Accepted values between 0.7 and 1.8.
number
Highlight Color
The highlight color.
Color
Midtone Color
The midtone color.
Color
Lowlight Color
The lowlight color.
Color
Base Color (Fog)
The fog color.
Color
Blur Factor
The fog blur. Accepted values between 0.1 and 0.9.
number
Zoom
The animation zoom. Accepted values between 0.1 and 3.
number
Speed (Fog)
The animation speed. Accepted values between 0 and 5.
number
Color Mode
Defines the birds coloring.
Dropdown
Quantity
The birds amount. Accepted values between 1 and 5.
number
Bird Size
The size of birds. Accepted values between 0.5 and 4.
number
Wing Span
The birds’ wingspan. Accepted values between 10 and 40.
number
Speed Limit
The fly speed of birds. Accepted values between 1 and 10.
number
Separation
The space between birds. Accepted values between 1 and 100.
number
Alignment
The birds’ alignment. Accepted values between 1 and 100.
number
Cohesion
The birds’ cohesion. Accepted values between 1 and 100.
number

Workflow example

Add animated background for the whole page

  1. On the page, it is placed the Animated Background element the following completed fields.
Image without caption
Image without caption
  1. On the page, for the Page element, the ID Attribute is set as β€œback”.
Image without caption
  1. The Element ID field from the plugin element is set up as β€œback” too.
Image without caption

Changelogs

Update 16.06.22 - Version 1.1.0

  • Demo and Editor links added to description

Update 15.06.22 - Version 1.1.0

  • First release. Implemented the main functionality and configuration logic