如何在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 屏幕，您可能需要调高一点。

如何在Corvid中实现滚动淡入淡出效果？

How to achieve a scroll fade effect in Corvid?

velo