涟漪效应未显示，我该如何解决？

如何解决涟漪效应未显示，我该如何解决？

我正在尝试让 JQuery Ripple 效果在我的页面 (#middle-container) 中的容器上工作，但由于某种原因它不起作用，我查看了资源，我很确定我是使用正确的代码，但我是在 Squarespace 中制作的，所以我不确定这是否有显着差异。

这是网站的链接：Solace

密码是：solace（在我完成之前是私有的）

以下是我的代码的直接片段：

script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>

<script>
  $('.ripple').ripples({
  resolution: 512,dropRadius: 20,perturbance: 0.04,});
</script>

//hide footer
.tweak-footer-show .Footer {
    display: none;
}

//background image switch
#home > div.Index-page-content {
   background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603da22dbe32591be4940c61/1614651949875/Green_Gradient_Background.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   width: 100vw;
   height: 100vh;
}

//hide arrow at bottom of page
#home > div.Index-page-scroll-indicator > svg {
  display: none;
}

//hide page header
#collection-603eb975151ed6131f59a6be > div.Site.loaded > div.Site-inner.Site-inner--index > header > div {
  display: none;
}

//index content,padding 0
.Index-page-content {
    -webkit-Box-sizing: border-Box;
    -moz-Box-sizing: border-Box;
    Box-sizing: border-Box;
    padding: 0px;
    align-items: center;
}

//main-container sp div
#block-yui_3_17_2_1_1614724121099_4494 {
  padding: 0px;
  margin: 0px;
}

#main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

#top-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  slign-content: center;
  align-items: center;
  height: 10%;
  width: 90%;
}

#top-nav-link-container {
  margin-left: 10px;
  margin-right: 10px;

}

#top-nav-link-container:hover {
  transform: skewX(-20deg);
}

#top-nav-link {
  color: black;
}

#middle-container {
  border: 2px solid black;
  height: 80%;
  width: 90%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603da22dbe32591be4940c61/1614651949875/Green_Gradient_Background.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

#logo-img-container {
  height: 100%;
  width: 100%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_logo-01.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 70%;
   margin-left: 20px;
   margin-right: 20px;
}

#bottom-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  slign-content: center;
  align-items: center;
  height: 10%;
  width: 90%;
}

#bottom-nav-link-container {
  margin-left: 10px;
  margin-right: 10px;

}

#bottom-nav-link-container:hover {
  transform: skewX(-20deg);
}

#bottom-nav-link {
  color: black;
}

<div id="main-container">
    <div id="top-nav-container">
        <div id="top-nav-link-container">
            <a href="url" id="top-nav-link"> therapy </a>
        </div>
        <div id="top-nav-link-container">
            <a href="url" id="top-nav-link"> meditation </a>
        </div>
        <div id="top-nav-link-container">
            <a href="url" id="top-nav-link"> covid-19 support </a>
        </div>
        <div id="top-nav-link-container">
            <a href="url" id="top-nav-link"> spiritual practitioners </a>
        </div>
        <div id="top-nav-link-container">
            <a href="url" id="top-nav-link"> food </a>
        </div>
        <div id="top-nav-link-container">
            <a href="url" id="top-nav-link"> collectives & community spaces </a>
        </div>
    </div>
    <div id="middle-container" class="ripple">
        <div id="logo-img-container"></div>
    </div>
    <div id="bottom-nav-container">
                <div id="bottom-nav-link-container">
            <a href="url" id="bottom-nav-link"> skin/body/haircare - bipoc independent businesses </a>
        </div>
        <div id="bottom-nav-link-container">
            <a href="url" id="bottom-nav-link"> safety </a>
        </div>
        <div id="bottom-nav-link-container">
            <a href="url" id="bottom-nav-link"> yoga </a>
        </div>
        <div id="bottom-nav-link-container">
            <a href="url" id="bottom-nav-link"> advice </a>
        </div>
        <div id="bottom-nav-link-container">
            <a href="url" id="bottom-nav-link"> herbalism & decolonized medicine  </a>
        </div>
    </div>
    </div>
</div>

任何帮助将不胜感激！

解决方法

看起来 the home page of the site in question 上没有这两个脚本（一个用于 JQuery，另一个用于 Ripple）。

看起来您已将它们添加到您的 /home 页面 here，但该页面并未设置为您的实际主页。您可能知道这一点，但认为值得一提。因为我经常与 Squarespace 合作，所以我知道要寻找它，但 StackOverflow 上的其他人不知道去 /home 看看你指的是什么。记住这一点。

无论如何，要解决此问题，请将您的 JavaScript 代码（从上述问题中的第一个片段）移动到页脚代码注入而不是页眉代码注入。它必须在页脚代码注入中，否则它会在您的 .ripples 元素出现之前执行，因此代码什么也不做。

因此，将其移至页脚代码注入，以便在运行时出现带有 class="ripples" 的元素。