在 SquareSpace 7.1 中使用 Vantas.js

Question

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

<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，因为使用较新版本 broke/caused 我的设置存在问题在 Squarespace 上。

在 SquareSpace 7.1 中使用 Vantas.js

Using Vantas.js with SquareSpace 7.1

javascript

html

jquery

squarespace