page-transitions是一款非常实用的jQuery和CSS3全屏整页切换过渡动画特效插件。该全屏切换插件可以制作水平方向和垂直方向上的全屏整页切换效果。每种模式都提供了默认、easing和淡入淡出三种过渡动画效果。
使用方法
使用该插件需要引入animations.css和jQuery、page-transitions.js文件。
<link rel="stylesheet" href="css/animations.css"> <script src="js/jquery.min.js"></script> <script src="js/page-transitions.js"></script>
HTML结构
在HTML结构中,data-to
属性代表你想过渡到的下一个页面的ID号。data-transition
属性是过渡动画的类型。可选的内置动画类型有:horizontal, vertical, horizontal-easing, vertical-easing, horizontal-fade 和 vertical-fade。以上效果还有各自对应的反向动画效果:horizontal-reverse, vertical-reverse, horizontal-easing-reverse, vertical-easing-reverse, horizontal-fade-reverse 和 vertical-fade-reverse。
<div id="page-1" class="page"> <h1>Page One</h1> <button class="transition" data-to="page-2" data-transition="horizontal"> NEXT PAGE </button> </div> <div id="page-2" class="page"> <h1>Page Two</h1> <button class="transition" data-to="page-3" data-transition="horizontal-easing"> NEXT PAGE </button> </div> <div id="page-3" class="page"> <h1>Page Three</h1> <button class="transition" data-to="page-1" data-transition="horizontal-fade"> NEXT PAGE </button> </div>
CSS样式
为你的.page
页面添加下面的一些必要的CSS样式。
.page { height: 100%; overflow: hidden; position: absolute; visibility: hidden; width: 100%; } .current-page { visibility: visible; z-index: 1; }
初始化插件
使用该插件只需要将page-transitions.js文件引入到页面的底部即可正常工作。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!