元素视差方向移动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