我正在为客户构建一个视差主页,目前正在使用Stellar.js。
页面中间有一个名为#slide2
的div,宽度为100%
,从650px
高处开始。另一个名为#slide3的div,也是width: 100%
,位于#slide2
之下。 #slide3
前面的#slide2
向上滚动速度比正常情况快。
该项目的设计者希望#slide2
'缩小,直到它高达350px'。现在,这意味着#slide3
,低于它,必须以一个速度向上滚动 - 快速以便它包含#slide2
的一部分 - 然后突然以另一个速度滚动 - 正常速度,所以它不会超过300px
的{{1}}。
我尝试过使用jQuery将不同的'data-stellar-ratio'写入元素中间滚动,以使其突然以不同的速度移动。它不起作用。该属性显示在代码中,但速度保持不变。
我也试过通过滚动来触发调整大小事件 - 即#slide2
字面缩小到350px而#slide2
根本没有在#slide2前面传递 - 但这不是设计师想要的。此外,resize事件只发生一次,并且必须刷新页面才能再次看到它,这也是禁止的。
所以,这是我的问题:我不认为他们要求我做的事实际上可能存在当前存在的任何当前视差插件。
这就是我在这里发帖子的原因。可以在Stellar.js或任何其他当前可用的插件上为元素,中间滚动更改滚动速度吗?或者,是否有人对如何做到这一点有任何想法?
任何帮助都会非常感激。
这是我试图操纵的HTML:
#slide3
在这里,如果重要的话,是我的Stellar.js代码:
<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>