关于 javascript:幻灯片内容/页面过渡

Slide content / page transition

我正在尝试重新创建他们在 gimmebar.com 上完成的内容。

当您单击图像时,当前页面的内容向左滑出并淡出。目标页面淡入并从右侧滑入。

我尝试了一些方法,例如在宽度为 200% 的容器中创建两个 div,然后滚动内容以查看和使用 JqueryUI 以及滑动 div。
滚动失败,div 根本没有移动,无论如何 srollLeft 始终为 0。
幻灯片的效果要好一些,但对我来说,它们似乎不是同时运行的。
第二个 div 只是突然出现而不是很好地滑入第一个后面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    slide demo
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    .container {
        width: 100%;
        float: left;
        height: 800px;
    }
    #one {
        background-color: red;
    }
    #two {
        background-color: #333;
        display: none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js">
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">
</head>
<body>
   
   

$( document ).click(function() {
          $("#one").hide("slide", { direction:"left" }, 1000);
          $("#two").show("slide", { direction:"left" }, 1000);
});

</body>
</html>

看起来应该很容易实现,但我被卡住了。

保重。

编辑:
正如你在这个小提琴中看到的那样,我有点让它工作。
幻灯片在那里,但我看不到任何褪色。
也可能有更好的方法来实现这一点,但我很满意不必加载第三个库/插件只是为了滑动 div。

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
找到了由他们的开发人员编写的教程。认为这可以算作解决方案。


纯javascript解决方案:在CSS中:

1
2
3
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
    top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}

在 HTML 中:

1
2
3
4
5
    This is the content that is initially displayed


   
        Put the content you want to be revealed here

newContent div 最初是隐藏的,因为它的左边缘在其父(环绕)div 的右边缘,并且 CSS 告诉浏览器隐藏任何溢出父 div 的内容。

然后为了显示隐藏的内容设置一个计时器,逐渐将内部 div 的 style.left 从 100% 减少到 0%,并将不透明度从 0 增加到 1。我创建了一个用于打开/关闭 swipey 菜单的类稍微调整以执行此操作。 (编辑:更新版本)


我建议您使用我不久前在网站上使用的这个 jQuery 脚本,它的作用就像一个魅力,它被称为 CODA SLIDER,它是由 Kevin Batdorf 制作的,安装它只有 5 行代码。

祝你好运