元素视差方向移动jQuery插件-类似github 404页面效果

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

前言：

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

demo ：

轩枫阁404页面：http://xuanfengge.com/demo/201406/404/

github 404页面：https://github.com/404

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

视差滚动

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

示例（最后一个专题）：http://www.xuanfengge.com/funny/

视差方向移动

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

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

下载：shake.js

使用教程

HTML

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

<div id="container">
<div class="move">
<img class="bg plaxify" src="./images/404.jpg" alt="轩枫阁404" width="980"  data-xrange="10" data-yrange="2"  height="600" />
<img class="note plaxify" alt="轩枫阁404" data-xrange="25" data-yrange="25" height="210" width="230" src="./images/note.png"  title="傻了吧  - -  当一回侦探自救吧~" />
<ul class="gallery plaxify"  data-xrange="10" data-yrange="10">
<li class="chris"><img src="./images/chris.png" alt="轩枫阁404"  title="我家壁画好看吧？" /></li>
<li><a href="https://github.com/xuanfeng/" title="去github瞧瞧"><img src="./images/github.png" alt="轩枫 github"></a></li>
<li><a href="http://www.xuanfengge.com/" title="终于找到你了"><img src="./images/logo.png" alt="轩枫阁logo"></a></li>

<div class="nav">
<a href="" class="current"></a>
<a href="" class=""></a>
<a href="" class=""></a>
</div>
</ul>
<img class="man plaxify" alt="轩枫阁404" title="设计师不在，只好自己作图了 →_→" data-xrange="70" data-yrange="10" height="451" width="301" src="./images/man.png">
<img class="rubbish plaxify" alt="" data-xrange="50" data-yrange="20" height="96" width="143" src="./images/rubbish.png" title="翻一翻看有没有线索...">
</div>

</div>

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;
}

效果预览

点击：http://www.xuanfengge.com/404