轩枫阁

首页 / 授人以渔 / 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

191/437
193/437

相关文章

文章评论

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

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

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]