html - Squarespace 网站上的视差抖动

Question

我知道这不是典型的 StackOverflow 编码问题，但我想深入了解如何修复图像上下的抖动、空白以及在 Squarespace 网站上滚动时视差部分的闪烁我'我正在为客户创作。我有 100vh 的视差(索引页)部分，我的所有图像和部分都使用 flexbox 全宽。

我目前正在使用 Moshka (Brine) 模板，我读到一些关于这个特殊模板系列存在视差问题的信息，但我希望有人知道我可以尝试解决这些问题使用自定义代码注入(inject)的问题。

我能够使用基本的 CSS 和 HTML 使某些东西看起来像我想要的那样，但我相当缺乏经验，不知道从哪里开始修复 Squarespace 网站的视差，希望有人能给我指出正确的方向(或者告诉我这是无望的，这也很好)。

我已尝试删除我的自定义代码、更改视差部分的高度并更改浏览器的宽度来修复它，但似乎无法阻止抖动和闪烁。如果我删除代码的 flexbox 部分，视差图像上方和下方的空白会好一点，但问题仍然存在。

在此先感谢您的帮助!抱歉，如果这不是正确的提问地点。

我不知道是否有必要提供我的自定义代码，但如果人们认为有必要，我可以修改这篇文章以包含一些代码。我在下面的网站视差部分(图像中的 1px 黑线)出现了闪烁的示例。我无法真正捕捉到我得到的空白，因为它们在滚动时出现并在我停止时消失。

再次感谢!

Answer 1

解决 Squarespace 视差索引页面部分之间空白间隙“撕裂”的方法是在每个部分的图像“后面”创建一个元素，然后用类似于以下内容的颜色(或渐变)填充该元素在两个部分之间的过渡区域中看到的。

这在每个具有背景图像的部分与具有平坦背景颜色的部分交替出现的情况下效果更好。

但是，它仍然可以在您的情况下充分发挥作用，在这种情况下，图像彼此对接​​(并且图像顶部/底部的颜色在整个图像宽度上相对一致)。

以下通过 Squarespace CSS 编辑器插入的 CSS 将您提供的示例网站上的部分之间的“撕裂”几乎察觉不到。

.Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background-color: #232125;
}
#last:before {
    background-color: #CAB8B1;
}

当然，“撕裂”仍在发生，但我们正在用接近图像颜色的颜色(以便不易察觉)填充白色间隙(非常明显)。

请注意，颜色(232125、CAB8B1)和 ID(welcome、last)是特定的到您提供的示例网站。它们需要在每个站点的基础上进行更改。这些颜色是通过从每个图像的适用部分采样颜色来选择的，索引页面部分 ID 由 Squarespace 根据每个页面的页面设置中的“URL slug”分配。

不过，现在让我们更仔细地看一下。

虽然上面的 CSS 使部分之间的撕裂变得难以察觉，但第一部分和导航栏(白色)之间以及最后一部分和页脚(海军蓝色)之间仍然存在撕裂。

因此，我们必须变得更复杂一些，向伪元素添加背景渐变。为此，您需要使用类似这样的东西来代替上面的 CSS:

.Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#232125 50%,#232125 100%);
}
#last:before {
    background: linear-gradient(to bottom,  #CAB8B1 0%,#CAB8B1 50%,#081359 50%,#081359 100%);
}

值得一提的是，这不是 Squarespace 的问题，而是 Javascript 滚动事件和页面呈现的本质。偏移量基于页面滚动的量(过去式)，因此当然在滚动发生之后之前无法计算(然后执行)该量。所以本质上偏移量总是“ catch ”。 Squarespace 实现背后的想法是，用户将使用运行良好的设备和浏览器，以至于不会察觉到延迟。显然，情况并非总是如此!