在 SquareSpace 7.1 中使用 Vantas.js

Question

我正在尝试在我的 SquareSpace 网站上嵌入来自 vanta.js 的非常酷的网站背景。我已经在这里待了几天了，我真的很难过。在嵌入代码块中使用以下代码（以及网站上保存/托管的两个 .js 脚本）：

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

<div id=vantajs></div>

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

我可以轻松地让 3D 图像出现。但由于它在代码块中，它实际上不是页面背景，我不能在上面放置任何内容。

当我尝试使用代码注入器功能直接将 3D 图像设置为我的网站背景时，很遗憾它不起作用。这是我正在使用的代码（尽管此时我已经尝试了数百种变体）：

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

另一种变体：

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

无论我如何调整代码，我仍然在控制台中得到控制台错误Cannot find element #vantajs。我几乎似乎 SquareSpace 阻止我编辑 section-background 元素或其他东西。

可以在此处找到带有工作代码块的测试网页：https://crocodile-bamboo-zzzh.squarespace.com/vantatest2

无法使用元素的测试网页错误：https://crocodile-bamboo-zzzh.squarespace.com/vantatest

我愿意在这里尝试任何建议或提示。

Answer 1

我最近自己开始使用它 - 它需要从 CDN 加载库并确保您使用 window 对象。这就是我在 Squarespace 7.1 中使用的，截至发帖时它正在工作。我把代码放到我想要的页面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>

为了使其正常工作，您需要确保将el: .section-background 正确设置为任何目标 div。还要更改动画类型（此代码示例中的 Halo）和其他配置设置。您可以通过使用开发者工具和您使用的任何浏览器检查元素来找到这一点。

注意：我已将通过 CDN 加载的 Vanta.js 版本“固定”到 0.5.17，因为使用较新的版本会破坏/导致我在 Squarespace 上的设置出现问题。