年关将至，给大家拜年。

最近时间充裕了一点，给大家介绍一个比较有意思的控件：Parallax。它可以用来实现鼠标移动时，页面上的元素也做偏移的视差效果。在一些有表现层次，布局空旷的页面上，用来做Head最合适不过了，大家可以看这个官方Demo。

一、准备工作

如果不想用cdn的话，就下载

1、在github上下载parallax

2、下载jquery

二、实现效果

这里只介绍最简单的使用方法，先上代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>恭喜发财</title>

     <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

     <script type="text/javascript" src="//cdn.bootcss.com/parallax/2.1.3/jquery.parallax.min.js"></script>

     <script type="text/javascript" src="//cdn.bootcss.com/parallax/2.1.3/parallax.min.js"></script>

     <style>

         html, body {

             width: 100%;

             height: 100%;

             margin: 0;

             padding: 0;

         }

         /*** 定位 ***/

         #DIV_title {

             width: 100%;

             height: 100%;

             position: absolute;

             top: 0;

             left: 0;

             margin: 0;

         }

         #DIV_title li {

             width: 100%;

             height: 100%;

         }

         #DIV_title_bg {

             position: absolute;

             width: 110%;

             height: 110%;

             top: -5%;

             left: -5%;

             background: url("http://dwz.cn/58F0u5") no-repeat 50% 100%;

             background-size: cover;

         }

         #DIV_title h1 {

             position: absolute;

             left: 50%;

             font-size: 100px;

             font-weight: bold;

             color: yellow;

         }

         #H1_title_1 {

             margin-left: -250px;

             top: 100px;

         }

         #H1_title_2 {

             margin-left: -200px;

             top: 200px;

         }

         #H1_title_3 {

             margin-left: -150px;

             top: 300px;

         }

         #H1_title_4 {

             margin-left: -100px;

             top: 400px;

         }

         #H1_title_5 {

             margin-left: -50px;

             top: 500px;

         }

     </style>

 </head>

 <body>

     <ul id="DIV_title">

         <li class="layer" data-depth="0.10"><div id="DIV_title_bg"></div></li>

         <li class="layer" data-depth="0.15"><h1 id="H1_title_1">新</h1></li>

         <li class="layer" data-depth="0.60"><h1 id="H1_title_2">年</h1></li>

         <li class="layer" data-depth="0.30"><h1 id="H1_title_3">快</h1></li>

         <li class="layer" data-depth="0.50"><h1 id="H1_title_4">乐</h1></li>

         <li class="layer" data-depth="1.00"><h1 id="H1_title_5">！</h1></li>

     </ul>

 <script type="text/javascript">

     $(function() {

         var parallax = new Parallax(document.getElementById("DIV_title"));

         console.log(parallax);

     });

 </script>

 </body>

 </html>

先忽略css，来看最核心的框架：

1、DIV_title list。此list的层次结构可以根据自己的需要进行调整，记得list子级的li带上class="layer"。

2、data-depth属性。此属性关系到景深，取0~1，越大的数字表示越靠间，相对其它元素动得越快。

3、js初始化。在dom加载完，通过new Parallax()方法即可把指定元素纳入视差效果。

4、更多的参数，参考前面的github链接。

再来看一下css：

1、通过绝对定位把各个元素放到不同的位置；

2、实现了bg图也可动的效果。#DIV_title_bg元素的css之所以要加-5%，就是在背景也可动时，不出现空白所以特意加了位移，图片也对应地加大了10%。

3、各个子元素以50%居中为基准，左右移动定位；

四、Demo效果

http://codepen.io/anon/pen/qRmjOW

请无视主页面下面滚动条的空白，这是因为iframe导致的。

转载请注明原址：http://www.cnblogs.com/lekko/p/6339827.html

基于Parallax设计HTML视差效果的更多相关文章

  1. 用CSS3 & jQuery创建apple TV海报视差效果

    用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...

  2. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  5. Android 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了: 先扔一个最终实现的效果图 先分析下效果图中实现的功 ...

  6. 重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印

    重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印 一.引言 桌面端系统经常需要对接各种硬件设备,比如扫描器.读卡器.打印机等. 这里介绍下桌面端 ...

  7. 总结开发中基于DevExpress的Winform界面效果

    DevExpress是一家全球知名的控件开发公司, DevExpress 也特指此公司出品的控件集合或某系列控件或其中某控件.我们应用最为广泛的是基于Winform的DevExpress控件组,本篇随 ...

  8. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  9. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

随机推荐

  1. 微信小程序实现顶部、底部联动滑动

    这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布 ...

  2. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  3. python3 第二十二章 - 函数式编程之Decorator（装饰器）

    前面我们说了,在python中,一切皆对象.函数也是一个对象,而且函数对象可以被赋值给变量,通过变量也能调用该函数.如: def sayHello(name): print(name + ' hell ...

  4. Linux PHP多版本切换 超简单办法

    今天在帮别人安装一个不知所谓的东西时碰到,三版本的PHP环境,我感觉那个人也是666哒,他使用的是AMH快速开发工具 有图有真相!!! 然后就顺便写下怎么快速,简便切换php版本 首先:find命令找 ...

  5. 苹果系统css样式变化

    原因:苹果自带样式覆盖了 参考文章比较详细,就不自己写了,copy了一份~~~ @参考文章 只要在样式里面加一句去掉css去掉iPhone.iPad的默认按钮样式就可以了!~ input[type=& ...

  6. javascript 中的console.log有什么作用啊？

    相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. console不会打断你页面的操作,如果用al ...

  7. wampserver 的Apache启动错误提示：The requested URL / was not found on this server.

    打开localhost显示以下错误 原因:之前我配置了虚拟主机,所以服务器是从虚拟环境访问的,localhost也就访问不到 解决方法:打开httpd.conf配置文件,将Include conf/e ...

  8. 02-Go语言数据类型与变量

    Go基本类型 布尔型: bool - 长度: 1字节 - 取值范围: true,false - 注意事项: 不可以用数字代表true或false 整型: int/uint - 根据运行平台可能为32或 ...

  9. ulua c#调用lua中模拟的类成员函数

    项目使用ulua,我神烦这个东西.lua单纯在lua环境使用还好,一旦要跟外界交互,各种月经不调就来了.要记住贼多的细节,你才能稍微处理好.一个破栈,pop来push去,位置一会在-1,一会在-3,2 ...

  10. CGI编程

    1简介 .CGI:通用网关接口(Common Gateway Interface)是一个Web服务器主机提供信息服务的标准接口,服务器和客户端之间的通信,是客户端的浏览器和服务器端的http服务器之间 ...