两个网页之间的滑动过渡动画

时间:2013-05-03 09:07:08

标签: javascript jquery html5 animation slider

例如我的网页很少

如何点击1.html2.html

中的链接

然后1.html向左滑动并2.html加载并从right滑动?

就像这个效果:

https://delicious.com/join

以及github项目

https://github.com/CyanogenMod/android_packages_apps_Settings

没有浏览器刷新闪烁

并且URL也发生了变化。

是否使用jquery

我必须使用mvc php frameworkrails来构建site

如何创建这样的webpage

open source project还是示例code

2 个答案:

答案 0 :(得分:2)

如果你的问题是如何做动画,那么JQuery就是负责它的人。

您可以查看此链接以供参考:

Downloads
Demo

或者您可以在互联网上尝试其他搜索,只需输入“Fancy Sliding Forms”

即可

实际上,这完全取决于您的网页设计师/开发人员如何实现该Jquery。只需阅读文档。

神速!

答案 1 :(得分:1)

最近我面临的挑战是开发轻量级Web应用程序,因此我使用了最少的jQuery,因为在移动设备上查看时,无法保证顺畅的行为。所以我选择了硬件加速的css转换。 您可以将网页的内容放在两个div中,并动态添加和删除类以查看此效果。

/* CSS */
.page-one {
  width: 100%;  
  -webkit-transform : translateX(0px);
  height:100%;
  position: fixed;
  background-color: #fff;
  color : #6B6B77;
  box-shadow: -3px 3px 3px #ddd;
  overflow: auto;
}

.page-one.invisible {
  -webkit-transform: translateX(-100%);
}

.page-one,
body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-two {
  -webkit-transform: translateX(100%);
}

.page-two.visible {
  -webkit-transform: translateX(0px);
}

.page-two,
body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}