javascript - 使用skrollr.js实现横向效果

Question

我希望建立一个水平滚动的网站，从我目前的研究来看，Skrollr.js 似乎是一个很好的工具，但我遇到了一些问题。 我正在创建多个场景，这些场景包含在 2048x768 的 div 中，窗口大小为 1024x768，我还读到 Skrollr 使用垂直滚动来实现水平滚动的错觉。所以我将我的 html 布局如下:

page content (1024x3072)

-- slides container (1024x3072)

--- slides (1024x768)
----first horizontal content (2048x768) ----second horizontal content (1024x768)

我正在沿水平轴使用 transform 属性为幻灯片容器设置动画，如下所示:

<div id="slides"
data-0="transform: translate (-0px,0)"
data-1024="transform: translate (-1024px, 0)"
data-2048="transform: translate (-2048px,0)"
data-3072="transform: translate (-3072px, 0)" >

但绝对没有任何反应。我在这里遵循正确的逻辑吗？我从本教程中改编了它: https://ihatetomatoes.net/create-scrolling-slideshow-using-skrollr/ 是否有可能通过 Skrollr 实现我所需要的，或者尝试另一个插件会更好吗？我正在考虑尝试 jInvertScroll.js，但我觉得 Skrollr 的功能要好得多。

Answer 1

我在 JSfiddle 上做了这个希望对你有帮助

    <div class = "slide1 s" data-0="left:0px;" data-1000="left:-500px"></div>

<div class = "slide2 s" data-0="left:500px;"data-1000="left:0px"data-2000="left:-500px"></div>

<div class = "slide3 s" data-0="left:1000px;"data-1000="left:500px"data-2000="left:0px"></div>



    .s{
    position:fixed;
    width:500px;
    height:500px;
}
.slide1{
    background:#f1f1f1;
}
.slide2{
    background:#e1e1e1;
}
.slide3{
    background:#262626;
}