2

我正在为客户构建视差主页，目前正在使用 Stellar.js。

#slide2在页面中间有一个 div 被称为width100%并从650pxtall 开始。另一个名为 #slide3 的 div 也width: 100%位于下方#slide2。#slide3在#slide2.

该项目的设计师想要#slide2“缩小到 350 像素高”。现在，这意味着#slide3，在它下面，必须以一种速度向上滚动 - 快速，以便它包含它#slide2后面的一部分 - 然后突然以另一种速度滚动 - 正常速度，这样它就不会覆盖超过300px的#slide2。

我尝试使用 jQuery 在中间滚动的元素中写入不同的“数据星比率”，以使其突然以不同的速度移动。但它不起作用。该属性显示在代码中，但速度保持不变。

我还尝试通过滚动触发调整大小事件——即#slide2字面上缩小到 350 像素并且#slide3根本不会在#slide2 前面通过——但这不是设计师想要的。此外，resize 事件只发生一次，必须刷新页面才能再次看到它，这也是一个禁忌。

所以，这是我的问题：我认为他们要求我做的事情实际上不可能使用当前存在的任何当前视差插件。

这就是为什么我在这里发布我的问题。可以在 Stellar.js 或任何其他当前可用的插件上更改元素、中间滚动的滚动速度吗？或者，有人对如何做到这一点有任何想法吗？

任何帮助都会非常非常感激。

这是我要操作的 HTML：

<div class="slide" id="slide2" data-stellar-background-ratio="0.2">
</div>

<div class="slide" id="slide3" data-stellar-ratio="2.65" data-stellar-vertical-offset="190">
</div>

如果重要的话，这里是我的 Stellar.js 代码：

$(window).stellar({
  horizontalScrolling: false,
  verticalScrolling: true,
  scrollProperty: 'scroll',
  parallaxBackgrounds: true,
  parallaxElements: true,
  hideDistantElements: false
});
4

0 回答 0