Adding interactive object animations to a website creates a delightful experience for users besides making it more appealing. Adding one to the website might be much easier than you think.
We will look at the Vanta.js library that will help us create an animated background for various elements.
What is Vanta.js?
“Animated website background in few lines of code” - is an apt description of the library.
Why should we use Vanta.js?
Vanta.js works similarly to plug-and-play devices. Injecting it into the website is just a few lines away. It also supports mouse controls, gyro controls (for mobile devices) & touch controls. Added to that it provides 3 different background effects to choose from.
Lets' start building up a website injected with the vanta.js effect.
Setting Up the project.
Since we are starting from scratch we need to create an empty HTML template and save it as index.html. This step is optional if we use an already existing project.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="style.css" rel="stylesheet" /> </head> <body> <script> </script> </body> </html> We would need to include the assets needed to run the Vanta.js background. Vanta.js supports THREE.js as well as p5.js. We will proceed with THREE.js. Include the script in the <head> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script> We will create a file named style.css and add the following stuff. This is just to make the scratch website look a little cooler. However, this is purely optional.
// styles.css .container { width: 100%; height: 100vh; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container h2 { font-size: 4em; font-family: "Montserrat", sans-serif; color: #FFFFFF; text-shadow: 1px 1px #D37E86; } .container p { font-size: 1.5em; font-family: "Nunito Sans", sans-serif; color: #FFFFFF; text-shadow: 1px 1px #070707; } Let's start
We first create a div element inside the body that will be used by Vanta.js to render the background. We assign it a unique id of “vantajs-bg”, this will help us to refer to the element in javascript.
<div id="vantajs-bg"></div>
We change the CSS properties of div to cover the entire screen. The z-index is set to -1 so that the background does not render over the web page elements. The height and width are set to cover the screen.
#vantajs-bg{ position:absolute; z-index:-1; width:100%; height: 100%; } Vanta.js has 13 effects in its library. To start we will look at the HALO effect. To add the HALO effect, all we need to add are two script tags.
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script> <script> VANTA.HALO({ el: document.getElementById("vantajs-bg"), // change the element here. mouseControls: true, touchControls: true, gyroControls: true, }); </script> The first script loads the HALO effect from the Vanta library, and the second initializes the object and injects it into the element with id vantajs-bg. Here we go.
The HALO effect.The entire index.html looks like this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="style.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script> <script> VANTA.HALO({ el: document.getElementById("vantajs-bg"), // change the element here. mouseControls: true, touchControls: true, gyroControls: true, }); </script> </body> </html> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script> <script> var effect = VANTA.HALO({ el: document.getElementById("vantajs-bg"), // change the element here. mouseControls: true, touchControls: true, gyroControls: true, }); </script> </body> </html> The parameters of the effect can be tweaked according to the needs. For example, if the device supports gyro controls, it can be turned on, etc. The CSS properties like background color can also be changed as per requirements (More on this later).
VANTA.js library provides 13 effects for your website. HALO is my favourite 😍 However, similar method can be employed for other 12 effects. Please refer the pen for other effects available in Vanta.js.
See the Pen VantaJS Interactive BG by Mehul Kumar Nirala
(@MuLx10) on CodePen.
13 effects
- HALO
- BIRDS
- CLOUD
- CLOUD2
- CELLS
- TOPOLOGY
- FOG
- WAVES
- GLOBE
- NET
- TRUNK
- RINGS
- DOTS
Bonus
As discussed before the properties of the effects can be charged as per our requirement. The rise of the dark lord (I mean theme 😜) has created a need to incorporate theme toggle. We can tweak the parameters of Vanta.js to incorporate the same. We will set a light background to update the animation. Note the color values are specified in hex color codes however the format is different.
// Later, when you want to update an animation in progress with new options effect.setOptions({ backgroundColor: 0x6274e8 }) // Later, if the container changes size and you want to force Vanta to redraw at the new canvas size effect.resize() The setOptions method can be slid inside a button onClick event to trigger the Vanta.js effect background change.
Thank you for reading 😄.
Connect with me:
