jQuery和CSS3全屏整页切换过渡动画特效

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文件引入到页面的底部即可正常工作。