原文地址：http://www.xuanfengge.com/shake.html

前言：

视差滚动，大家也许并不陌生。但是对于视差方向移动，你是否有见过效果呢？看官请进来瞧瞧~

demo ：

轩枫阁404页面：

github 404页面：

说明：轩枫阁的404页面灵感来自于Github 404页面效果，并增强了交互。同时轩枫阁的第一个404页面效果是腾讯公益404寻找孩子页面，现在的版本是二次改版，增强了交互，即进入404页面后，需要在当前页面中充当福尔摩斯角色，通过线索寻找到返回首页的入口。

视差滚动

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

示例（最后一个专题）：

视差方向移动

简介：这个名称是博主自己起的→_→。即多个元素跟随鼠标移动方向，以不同的速度和距离，在同一个方向上进行移动的交互。

插件：使用的是shake.js这个jQuery插件。首先要先加载jQuery才会生效。

下载：

使用教程

HTML

给需要移动的元素，加上相同的class： class=”plaxify”。并以data形式缓存数据（），设置的属性有X方向移动距离： data-xrange=”10″，Y方向移动距离：data-yrange=”2″。不同元素设置不同的值，会出现不一样的效果。

JS调用

$(function(){    // 插件调用（主要代码）    var layers = $('.plaxify');    $.each(layers, function(index, layer){        $(layer).plaxify({          xRange: $(layer).data('xrange') || 0,          yRange: $(layer).data('yrange') || 0,          invert: $(layer).data('invert') || false        });    });    $.plax.enable();     // 隐藏的导航    $(".nav a").each(function(i){        $(this).click(function(){            $(".gallery li").eq(i).show().siblings("li").hide();            $(this).addClass("current").siblings("a").removeClass("current");            return false;        });    })     // 点击显示导航    $(".rubbish").click(function(){        $(".nav").toggle();        return false;    });}) CSS代码

CSS代码

body{    background: #FFF;}.wrapper{    position: relative;    z-index: 0;    transition: all 0.25s ease-in;    -webkit-transition: all 0.25s ease-in 0;}.bg{    width: 980px;    height: 600px;    margin: 0 auto;    overflow: hidden;    position: absolute;    left: 0;    top: 0;} .move{    display: block;    width: 980px;    height: 600px;    margin: 0 auto;    margin-top: 80px;    position: relative;    overflow: hidden;    clear: both;}.bg{    top: 0;    left: 0;    z-index: 1;}.note{    top: 25px;    left: 50px;}.gallery{    height: 265px;    width: 317px;    top: 5px;    left: 670px;    background: url(../images/404_gallery.png) no-repeat;}.gallery li{    position: absolute;    display: none;    top: 20px;    left: 30px;    width: 250px;    height: 200px;    list-style: none;}.gallery li.chris{    display: block;}.nav{    display: none;    width: 100px;    height: 20px;    position: absolute;    bottom: 30px;    right: 50px;}.nav a{    width: 20px;    height: 20px;    display: inline-block;    background-image: url(../images/nav_404.png);    background-repeat: no-repeat;    background-position: 0 0 ;}.nav a.current{    background-position: 0 -20px;}.man{    top: 140px;    left: 350px;}.rubbish{    top: 420px;    left: 730px;    cursor: pointer;}.plaxify{    position: absolute;    z-index: 2;} .result{    width: 30px;    height: 30px;    background: url(../images/nav_404.png) no-repeat;}

效果预览

点击：