Search code examples
javascripthtmljquerysquarespace

Using Vantas.js with SquareSpace 7.1

I am attempting to embed a really cool website background from vanta.js on my SquareSpace website. I have been at this for a few days now and am truly stumped. With the following code in an embed code block (and the two .js scripts saved/hosted on the website):

<script src="/s/threer92min.js"></script>
<script src="/s/vantabirdsmin.js"></script>

<div id=vantajs></div>

<script>
VANTA.BIRDS({
  el: "#vantajs"
});
</script>

I can easily get the 3D image to appear. But since it is in a code block, it isn't actually the page background and I can't put any content on top of it.

When I attempt to use the code injector feature to directly set the 3D image as my website background, it sadly doesn't work. Here is the code I am using for that (though I have tried hundreds of variants at this point):

<script src="/s/threer92min.js"></script>
<script src="/s/vantabirdsmin.js"></script>
<script src=https://code.jquery.com/jquery-1.11.3.min.js></script>
<script>
var x = document.getElementsByClassName("section-background"); 
if (x.nodeType == 1){
x.setAttribute("id", "vantajs")};
</script>

<script>
VANTA.NET({
  el: "#vatajs"
})
</script>

Another variant:

<script>
window.addEventListener('load', function () {
VANTA.BIRDS({
  el: "#vantajs"});
})
</script>

<script>
var x = document.getElementsByClassName("section-background"); 
if (x.nodeType == 1){
x.setAttribute("id", "vantajs")};
</script>

No matter how I adjust the code, I still get the console error Cannot find element #vantajs in the console. I almost seems as if SquareSpace is preventing me from editing the section-background element or something.

A test webpage with the working code block can be found here: https://crocodile-bamboo-zzzh.squarespace.com/vantatest2

The test webpage that is not working with the element error: https://crocodile-bamboo-zzzh.squarespace.com/vantatest

I am open to any suggestions or tips here to try.

Solution

  • I recently got it working myself - it takes a combination of loading the libraries from a CDN and making sure you use the window object. This is what I'm using with Squarespace 7.1 which is working as of the time posting this. I put the code into the page I wanted under Page settings > Advanced > Page Header Code Injection :

    <script src="https://cdn.jsdelivr.net/npm/vanta/vendor/three.r95.min.js" type="application/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.17/dist/vanta.halo.min.js" type="application/javascript">
</script>
<script>
  window.onload = function() {
    window.VANTA.HALO({
      el: ".section-background", 
      mouseControls: true,
      touchControls: true,
      minHeight: 200.00,
      minWidth: 200.00,
      baseColor: 0x0,
      backgroundColor: 0xf23c47,
      size: 2.00
    })
  }
</script>

    In order for this to work, you'll want to make sure that the el: .section-background is appropriately set to whatever target div. Also change the animation type (Halo in this code sample) and other config settings. You can find this by inspecting the element using the Developer Tools with whatever browser you're using.

    Note: I've "pinned" the Vanta.js version loaded via CDN to 0.5.17 because using newer versions broke/caused issues for my setup on Squarespace.