轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / 元素视差方向移动jQuery插件-类似github 404页面效果

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

阅读：23781 评论：12 作者：ivan 分类：Javascript、创意、授人以渔

前言

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

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″。不同元素设置不同的值，会出现不一样的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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

224/470
226/470

相关阅读

文章评论

取消回复
  • Rosen

    由github 404网页探索他们那个动效的的js，看到了关键字plaxify，然后百度搜索到这边来，恭喜自己找了一个不错的前端教学网站

    2017 年 2 月 10 日 下午 2:58
    • 轩枫

      加油~

      2017 年 2 月 10 日 下午 4:17
  • 谢亚茹

    你好，大神，想问问要是一个页面应用多个这样的效果，offset().top该怎样动态改变

    2016 年 3 月 28 日 下午 4:34
  • Bunny

    你好，轩枫大神，问下啊如果页面很高，然后在页面中间或者底部我想使用这个特效就用不了了。这个问题能解决吗

    2015 年 7 月 31 日 下午 8:00
    • 轩枫

      计算高度的时候，加上上面隐藏的高度

      2015 年 7 月 31 日 下午 8:17
    • 轩枫

      或者给动画的外层div设置position: relative; ，里面的位置就根据外层定位

      2015 年 7 月 31 日 下午 8:18
      • Bunny

        这两个方法都不行呢。是我理解错吗，插件的定位怎么是只针对顶部第一屏的呢。可以话求加QQ指导一下，262672628

        2015 年 8 月 3 日 上午 10:20
  • lemon.Su

    插件下载不了

    2014 年 7 月 3 日 下午 4:58
    • 轩枫

      CTRL+S保存呐

      2014 年 7 月 3 日 下午 11:09
      • lemon.Su

        原来是酱紫！！！ 我还以为是404什么的

        2014 年 7 月 9 日 下午 2:06
        • 孙行者的通天大道

          卧槽，蠢萌蠢萌的

          2015 年 5 月 18 日 上午 12:11
          • 轩枫

            O(∩_∩)O哈哈~ 确实蠢萌蠢萌的

            2015 年 5 月 18 日 上午 12:20

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间