Power Pages Backgrounds
Power Pages backgrounds don’t have to be boring! If you’d like to jazz up your site with animated 3D backgrounds, you can do that with Vanta.js. It’s easy!
Vanta.js is a lightweight JavaScript library used for creating interactive, animated 3D background effects for websites. It is easy to integrate and highly customizable. You can add visually engaging elements like waves, fog, or particle systems. Vanta.js is both performant and visually impressive.
The GIF below doesn’t do the quality of the animation justice. For the real thing, take a look at the stunning animations on the Vanta.js website: https://www.vantajs.com
To integrate Vanta.js with Power Pages, simply follow these steps:
Step 1 - Create a Page
Create a page in Power Pages. No need to add any components.
Step 2 - Open the Page in VSC
Open the page in Visual Studio Code. Remove all the pre-existing HTML.
Step 3 - Copy the Vanta.js Code and Paste into VSC
We’ll use the Vanta birds theme so paste in the Vanta code from the Vanta home screen into VSC.
Rather than use a CDN (content delivery network) we will reference the Javascript library directly, so replace the first 2 scripts in the Vanta.js code with those below that link directly to these files. The Javascript files are large, so this isn’t the most efficient way to access the Vanta.js library but it is fine for demo purposes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
Step 4 - Create a Div for the Background
Create an empty div called “display-section”. We want our div to cover the full screen with the exception of the header so add appropriate inline CSS to the div.
Rename the element in the Vanta.js code to “display-section”
Once done, your code should look as below
Step 5 - Preview the Page
Preview the page to ensure the animation works. Customise the colours and adjust the Vanta.js parameters to suit your preference.
Step 6 - Enjoy!
Enjoy your animated background! Once you are happy, you can tidy up the code. You can move the CSS and Javascript into their own files if you wish. You can also add the Vanta.js files to your Power Pages CDN to improve performance and make the animation load quicker.
Create your content inside the “display-section” div.
