页面过度效果大集合(推荐!)

所属分类:UI-滚动

 22779  480  查看评论 (34)
页面过度效果大集合(推荐!) ie兼容10

各种页面过度动画效果放在一起,以便可以方便的查看这些有趣的和创造性的过度动画效果,当然有些是非常简单的,比如滑动,也有一些使用perspective和3D transform制作出有深度和动态感的效果。

说明:这只是为了展示一些有趣的动画效果和灵感。它并不是一个滑块或者类似滑块的东西。我们只是添加了一些class使其呈现出动态的过度效果,并不是为了导航。

==========以下内容由 八刀丁二 提供===============

我个人就比较笨 就不会做太复杂的步骤来触发效果切换

但某些特效上还是可以进行修改

主要在animations.css文件

当你下载之后可以看html源代码看下却换导航 中li标签中的data-animation属性

再查看pagetransitions.js中nextPage方法switch中查找data-animation中的数字 

找到之后您可以看到 outClass变量 和inClass变量

outClass 值的样式是 退出样式 

inClass 添加样式

通过样式名字 在animations.css 文件中 查找 变量中的值  好比 第一个效果是 pt-page-moveToLeft

我就查找 pt-page-moveToLeft 样式 

在 pt-page-moveToLeft样式中 有动画场景

.pt-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	-moz-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

场景样式变量是 moveToLeft  我们再查找 moveToLeft 

@-webkit-keyframes moveToLeft {
	to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeft {
	to { -moz-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	to { transform: translateX(-100%); }
}

每个样式有应对相对动画场景样式 可以直接复制在您想要的样式上也即可  要是通过js切换 还请高手写个吧 

相关插件-滚动

css3页面鼠标纵向滑动效果

css3页面鼠标纵向滑动效果
  滚动
 15417  104

jQuery和CSS3超炫3D整屏垂直滚动页面特效

这是一款使用jQuery和CSS3制作的效果超炫的3D整屏垂直滚动页面特效。该页面滚动特效在用户滚动鼠标或点击右侧的导航圆点按钮时,当前页面会3D倾斜缩小,下一个页面会逐渐放大并占满整个屏幕,效果非常酷。
  滚动
 6452  75

jquery无缝滚动

真正的无缝滚动
  滚动
 12387  108

javript自定义滚动条

用原生的javript写的自定义滚动条具有拖拽,滚轮事件和键盘事件
  滚动
 2480  28

讨论这个项目(34)回答他人问题或分享插件使用方法奖励jQ币

    水电费0
    2016/12/15 16:12:14
    Mako0
    2016/12/14 9:12:05
    岭神0
    2016/12/1 17:12:37
    UpHigari0
    2016/11/24 15:11:01
    Hugh0
    2016/11/21 16:11:45
    丧失酱0
    2016/7/31 10:07:13
    yoonfeng0
    2016/7/26 11:07:06
    是否能提供个具体的案例,例如有个左右两边切换的按钮? 回复
    ?0
    2016/7/14 10:07:00
    不错的,支持一个!!! 回复
    焦虑的插件0
    2016/6/16 17:06:13
    不错的,支持一个!!! 回复
    问号句号0
    2016/6/6 19:06:39
取消回复
    PROMULGATOR

    MrLeo

    北京市