javascript - 从右到左和从下到上滚动的插件

Question

我得到了一个需要以下行为的网页元素:

简介内容显示在屏幕上，并带有整页背景图像。

当用户向下滚动时，下一个内容部分将向上滚动以显示在具有自己的背景图像的整页上。

随着用户不断向下滚动，下一个内容部分从右(向左)滚动以显示其自己的带有背景图像的整页内容。

剩下的每张幻灯片都会继续这种行为(从右侧屏幕外滚动到左侧 View )。

我不确定我是否有时间构建自定义解决方案，所以我希望有一个预先存在的库，它基本上允许我设置 HTML 属性以确定每张幻灯片的滚动/滑动方向。

像这样:

<li class="slide active" scroll-direction="bottom-to-top">Slide 1</li>
<li class="slide" scroll-direction="bottom-to-top">Slide 2</li>
<li class="slide" scroll-direction="right-to-left">Slide 3</li>
<li class="slide" scroll-direction="right-to-left">Slide 4</li>
<li class="slide" scroll-direction="right-to-left">Slide 5</li>

Answer 1

尝试 ScrollMagic用于复杂的滚动动画。看这个demo这似乎与您的需求相似。