轩枫阁

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

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

前言

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

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

 JS调用

 CSS代码

 效果预览

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

224/470
226/470

相关阅读

文章评论

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

    • 加油~

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

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

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

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

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

  • 插件下载不了

    • CTRL+S保存呐

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

        • 卧槽,蠢萌蠢萌的

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

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子