如何在Corvid中实现滚动渐变效果

Question

我想知道是否有可能实现；滚动淡入淡出"；使用Corvid的效果？

下面是一个示例(请参阅页面底部的小箭头，以及向下滚动页面时的行为(：https://vero.co/

这是我的网站，我想在这里达到同样的效果：https://www.notenoughknife.com/

我感谢任何能提供帮助的人——我不是最擅长编码的，所以代码越具体越好！

提前感谢

马特

Answer 1

因此您必须为此添加一些代码。

为了使代码工作，您需要添加两个空框(容器(，使它们透明。

这里的基本思想是，在滚动时，当箭头下方的框出现在屏幕上时，箭头将被隐藏，当顶部框出现在画面上时，将显示箭头。

将一个框稍微放在箭头下方，这样当框出现时滚动时，箭头应该会消失。将另一个放在第一个图像的顶部。如代码中所示，在编辑器中命名id，或者相应地进行更改。将下面的代码放入onReady((部分。

let fadeOptions = {
"duration": 500, //time in ms
}
$w("#boxOverFirstImage").onViewportEnter(()=>{
$w("#arrow").show("fade", fadeOptions);
});
$w("#boxBelowArrow").onViewportEnter(()=>{
$w("#arrow").hide("fade", fadeOptions);
});

顺便说一句，当打开你的网站时，箭头是向下的。我猜你用的是宽屏显示器。由于大多数人将使用1366 x 768屏幕，您可能需要稍微提高一下。