涟漪效果不显示，如何修复？

Question

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

这里是 link 网站：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>

如有任何帮助，我们将不胜感激！

Answer 1

这两个脚本（一个用于 JQuery，一个用于 Ripples）似乎没有出现在 the home page of the site in question。

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

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

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

涟漪效果不显示，如何修复？

Ripples Effect not Showing, How Can I Fix?

jquery

background-image

squarespace

ripple