像PPT一样浏览网站

有很多网站的首页采用视差滚动的效果设计成单页面，就像制作PPT一样，每一屏都是一个内容。既能用简短的文字和图形传达了内容，又用视觉感很强的动画设计强化了主题。

今天我们来看一下单页面一屏切换内容的制作方式，效果有点像iphone5s的产品页面。

首先我们来了解一下视差滚动的概念，然后介绍一款JQuery的插件：

什么是视差滚动

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。

固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。

视差滚动效果的特点

  1. 直观的设计，快速的响应速度，更合适运用于单页面

  2. 差异滚动 分层视差

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。

以上内容摘录自：视差滚动(Parallax Scrolling)效果的原理和实现感兴趣的童鞋可以进去看看详细内容。

One Page Scroll 1.3

One Page Scroll是一个JQuery插件，能让你的网站页面允许用户一屏一屏的滚动，它完美的将内容呈现在同一个页面。你只需要引用相应的JS和CSS文件，经过简单的设置，就可以做出很炫的切屏效果。

Demo

注:One Page Scroll 1.3需要jQuery 1.9.0以上版本支持。

兼容性

现代的浏览器，如火狐，Chrome，Safari在桌面电脑和智能手机已经过测试。没有测试IE浏览器。

基本用法

  1. 下载最新的插件包.

  2. 将onepage-scroll.css、jquery.onepage-scroll.js引用到你文档的<head>内，当然你也需要引用一个1.9.0以上版本的jQery文件。

  3. 你的页面结构大概如下：

1
2
3
4
5
6
7
8
9
<body>
  ...
  <div class="main"> #main是我们要操作的容器，可以是id也可以是class，名字自取，这里以class为例。
    <section>...</section> #每屏内容的容器，可以不用section，自定义一个标签。
    <section>...</section>
    ...
  </div>
  ...
</body>
  1. 设置好页面内容以后，我们在页面底部来配置容器里的动作：
1
2
3
4
5
6
7
8
9
10
11
12
13
$(".main").onepage_scroll({
   sectionContainer: "section",     // 每屏内容的容器标签，可自定义，要和上面代码对应上。
   easing: "ease",                  // CSS3动画效果 "ease", "linear", "ease-in", "ease-out", "ease-in-out", 或者设置值 "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // 定义切换动画的时间
   pagination: true,                // 显示/隐藏分页按钮
   updateURL: false,                // URL地址切换。
   beforeMove: function(index) {},  // 在页面调用动画前的回调函数。
   afterMove: function(index) {},   // 完成动画之后的回调函数。
   loop: false,                     // 是否循环回到第一页或者最后一页。
   keyboard: true,                  // 是否开启键盘控制。
   responsiveFallback: false,        // 设置触发动画的屏幕最小宽度，例如设置成600，将屏幕小于600时将正常的页面滚动。
   direction: "vertical"            // 运动方向 纵向"vertical" 和 横向"horizontal"。  
});

现在你的页面已经可以按照切屏的效果来显示了。

快捷键

你可以用快捷键来操作动画：

上/下按键或者Page Up/Page Down键来切换到下一屏内容，当然如果是设置成横向移动的话，左右键也是可以切换的。

Home键切换到第一屏，End键切换到最后一屏。

公共方法

你可以通过编写程序，丰富你的页面动画：

$.fn.moveUp() 移动到上一屏：

1
$(".main").moveUp();

$.fn.moveDown() 移动到下一屏：

1
$(".main").moveDown();

$.fn.moveTo(page_index) 移动到指定屏：

1
$(".main").moveTo(3);

回调函数

beforeMove(current_page_index) 切屏动作之前调用

1
2
3
4
5
$(".main").onepage_scroll({
    beforeMove: function(index) {
      ...
    }
  });

afterMove(next_page_index) 切屏动作之后调用

1
2
3
4
5
$(".main").onepage_scroll({
  afterMove: function(index) {
    ...
  }
});