元素视差方向移动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
元素视差方向移动jQuery插件-类似github 404页面效果的更多相关文章
- 【JQuery插件】扑克正反面翻牌效果
里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- JQuery插件 aos.js-添加动画效果
原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...
- jQuery插件实例四:手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...
- 使用jQuery插件PrintArea进行html页面打印
在开发系统时,我们一般会有统计分析的功能需求,而现在大多数系统都是使用B/S的形式开发. 所以,html报表打印,并且打印指定内容,成了必要的功能. 开源地址:https://github.com/R ...
- 2014优秀的好用的20款免费jQuery插件推荐
2013 年最好的 20 款免费 jQuery 插件,世界买家网 www.buyerinfo.biz在这里分享给大家 这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现 今互联网市场上提 ...
- 2013 年最好的 20 款免费 jQuery 插件
2013 年最好的 20 款免费 jQuery 插件 oschina 发布于: 2014年01月11日 (8评) 分享到 新浪微博腾讯微博 收藏+99 互联网上面有很多 jQuery 插件,这里我们 ...
- 【转】2014年25款最好的jQuery插件
2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP 时间:2014-12-30 10:24:10 阅读数:2267 分享到: 0 http://www.php10 ...
- 图片延迟加载jquery插件imgLazyLoading
实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...
随机推荐
- [转]SQL Server 2008 如何配置报表管理器
本文转自:https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2008/cc281384%28v%3dsql.100%2 ...
- 使用JavaScript实现ajax
实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject.具体方法如下: var xmlHttp; function ...
- LoRa术语
ADR Adaptive Data Rate 自适应数据率 AES Advanced Encryption Standard 高级加密标准 AFA ...
- 第19课-数据库开发及ado.net ADO.NET--SQLDataReader使用.SqlProFiler演示.ADoNET连接池,参数化查询.SQLHelper .通过App.Config文件获得连接字符串
第19课-数据库开发及ado.net ADO.NET--SQLDataReader使用.SqlProFiler演示.ADoNET连接池,参数化查询.SQLHelper .通过App.Config文件获 ...
- Arrays工具类的aslist()方法的使用
数组转换成集合: 数组转换成集合不能增加或减少元素,但是可以用集合思想操作数组,也就是说可以使用其他集合中的办法 String[] arr = {"a", "b" ...
- SpringCloud+Hystrix服务容错
Netflix Hystrix — 应对复杂分布式系统中的延时和故障容错 +应用场景 分布式系统中经常会出现某个基础服务不可用造成整个系统不可用的情况, 这种现象被称为服务雪崩效应. 为了应对服务雪崩 ...
- JSP学习笔记(7)-JSP的文件操作
1.File类 File对象用来获取文件本身的一些信息,例如文件所在目录,文件的长度,文件读写权限等,不涉及文件的读写操作. 创建一个File对象的构造方法有3个: File(String filen ...
- Angular4.+ ngx-bootstrap Pagination 自定义分页组件
Angular4 随笔(二) ——自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页 ...
- 关于latex编译中文不显示问题的解决方法。
我的编译环境是texlive2018 + texstudio 配置如图 默认编码格式为utf8 直接上代码 %\documentclass{article} %\usepackage{xeCJK} \ ...
- JS中冒泡排序,选择排序,快速排序
var arr = [1,4,2,9,7,6,5,4,7,5]; // 冒泡排序(通俗的说就是j 和 j+1打,谁赢了谁去后面) for(var i = 1;i<ar ...