How To Use Vanta.Js as Background

Vanta.js is a JS library that is used to add animated website backgrounds by adding a few lines of code. We will guide you how to use vanta.js as background with LoginPress.

How to add Vanta.Js as Background Animation

To add it in LoginPress or Login Customizer is very easy.

  • Go to the Vanta.JS site. [ ]
  • Select the effect you want to add. ( We are using Globe animation )
  • On the right sidebar, you will see a box that has 3 script tags.

vanta.js as background

  • Click on the first script link and copy the URL to replace the Vanta CDN URL”. (see code below after the 8th point)
  • Click on the second link script link and copy the URL to replace the Vanta-effect CDN URL”. (see code below after the 8th point)
  • Create a new file in assets/js/ with the name “vanta-script.js” and copy the 3rd script of the box in this file.
  • (Change the selector "#Your-Element-Selector" in this JS file with "body.login")

Vanta Globe

  • Here is the structure of files you need in your child theme to implement it properly. assets | js | vanta-script.js
  • After placing the file/s accordingly into exact positions.
  • Add the following piece of code to your child theme’s functions.php file and save it.

add_action( 'login_head', 'prefix_vanta_login_header' );

 * Custom login header to add the custom scripts for the login page.
 * @return void
function prefix_vanta_login_header() {

	// Replace the VANTA CDN URL. This is the URL for the Vanta library.
	wp_enqueue_script( 'vanta', '', array(), '1.0.0', true );

	// Replace the Vanta-effect CDN URL. This is the URL for the Vanta-effect library.
	wp_enqueue_script( 'vanta-globe', '[email protected]/dist/vanta.globe.min.js', array(), '1.0.0', true );

	// This script will add the vanta initialization to your page.
	wp_register_script( 'prefix-animated-vanta', get_template_directory_uri() . '/assets/js/vanta-script.js', array(  'vanta', 'vanta-globe' ), '1.0.0', true );
	wp_enqueue_script( 'prefix-animated-vanta' );

Go to your login page and voila! There you have an animated background using Vanta.Js as Background.

That's all! You can also check out How to Find the WordPress Login URL (Easy Guide) and How to Easily Change the Login Logo in WordPress.

Not using LoginPress yet? What are you waiting for?

Leave a comment

Your email address will not be published. Required fields are marked *