使用Skrollr.js实现水平效果

Using Skrollr.js to achieve horizontal effect

本文关键字：水平 实现 Skrollr js 使用      更新时间：2023-09-26

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

page content (1024x3072)
-- slides container (1024x3072)
--- slides (1024x768)
----first horizontal content (2048x768) ----second horizontal content (1024x768)

我正在沿水平轴使用变换属性对幻灯片容器进行动画处理，如下所示：

<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具有更好的功能。

我在 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;
}
相关文章：