DEV Community

loading...

13 Interactive Animated Backgrounds for your Website using Vanta.js

Mehul Kumar Nirala
SWE
Updated on ・4 min read

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.

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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()

Enter fullscreen mode Exit fullscreen mode

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:



Discussion (6)

Collapse
oncuoztekin profile image
Öncü • Edited

Can you check your html file,
it has to be like this.

<!DOCTYPE html>



















<br>
VANTA.HALO({<br>
el: document.getElementById(&quot;vantajs-bg&quot;), // change the element here.<br>
mouseControls: true,<br>
touchControls: true,<br>
gyroControls: true,<br>
});<br>



Collapse
maddhruv profile image
Dhruv Jain 🤺 GraphQL

sorry 13?

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
rafipiccolo profile image
Raphael Piccolo

Haha we have a bad boi here

Collapse
naren67 profile image
naren67

Interesting

Some comments have been hidden by the post's author - find out more