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

所属分类:UI-滚动

 32339  636  查看评论 (47)
页面过度效果大集合(推荐!) 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切换 还请高手写个吧 

相关插件-滚动

jQuery滚动鼠标图像淡入淡出插件crossfade.js

crossfade.js是一个非常小的jQuery插件程序.当您滚动鼠标时图像实现叉淡入淡出效果。
  滚动
 14661  26

jQuery纵向滚动条(原创)

jQuery自定义纵向滚动条,支持鼠标滚动、滚动条拖拽,内容更新滚动条自动更新
  滚动
 6889  31

jQuery Smoove-华丽的CSS3滚动效果

jQuery Smoove使用它很容易实现CSS3转换效果,让你向下滚动页面的内容时展现绚丽的css3动画效果。
  滚动
 31455  135

jquery滚动效果插件ScrollMe

ScrollMe是一个页面添加简单的滚动效果的jQuery插件,当你向下滚动页面时,ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度,从而让整个页面动感起来。ScrollMe非常容易使用,它不需要写JS代码,只需在元素中写上属性就OK了。
  滚动
 7772  66

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

    /mn★怡琳★ 0
    2017/8/25 16:30:08
    卿卿 0
    2017/8/11 17:54:02
    0
    2017/7/10 10:58:28

    NB

        havefun0
        2017/8/2 18:04:36

        NB

    回复
    xguang 0
    2017/7/2 14:18:47

    挺好挺多的,都不知道该选哪一个了

    回复
    幻梦寻伊 0
    2017/6/21 11:36:27
    果断扔掉那块不准的手表 0
    2017/5/26 23:43:18
    RedD7 0
    2017/5/23 17:35:35
    夜尔九九 0
    2017/5/22 15:40:22
    angeae 0
    2017/4/22 13:43:04

    这个插件真的挺好用的

    回复
    Rabbit`man 0
    2017/4/17 16:41:29
取消回复