首页 > 代码库 > 基于Parallax设计HTML视差效果

基于Parallax设计HTML视差效果

    年关将至,给大家拜年。

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

 

一、准备工作

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

    1、在github上下载parallax

    2、下载jquery

 

二、实现效果

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

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="UTF-8"> 5     <title>恭喜发财</title> 6     <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> 7     <script type="text/javascript" src="//cdn.bootcss.com/parallax/2.1.3/jquery.parallax.min.js"></script> 8     <script type="text/javascript" src="//cdn.bootcss.com/parallax/2.1.3/parallax.min.js"></script> 9     <style>10         html, body {11             width: 100%;12             height: 100%;13             margin: 0;14             padding: 0;15         }16         /*** 定位 ***/17         #DIV_title {18             width: 100%;19             height: 100%;20             position: absolute;21             top: 0;22             left: 0;23             margin: 0;24         }25         #DIV_title li {26             width: 100%;27             height: 100%;28         }29         #DIV_title_bg {30             position: absolute;31             width: 110%;32             height: 110%;33             top: -5%;34             left: -5%;35             background: url("http://dwz.cn/58F0u5") no-repeat 50% 100%;36             background-size: cover;37         }38         #DIV_title h1 {39             position: absolute;40             left: 50%;41             font-size: 100px;42             font-weight: bold;43             color: yellow;44         }45         #H1_title_1 {46             margin-left: -250px;47             top: 100px;48         }49         #H1_title_2 {50             margin-left: -200px;51             top: 200px;52         }53         #H1_title_3 {54             margin-left: -150px;55             top: 300px;56         }57         #H1_title_4 {58             margin-left: -100px;59             top: 400px;60         }61         #H1_title_5 {62             margin-left: -50px;63             top: 500px;64         }65     </style>66 </head>67 68 <body>69     <ul id="DIV_title">70         <li class="layer" data-depth="0.10"><div id="DIV_title_bg"></div></li>71         <li class="layer" data-depth="0.15"><h1 id="H1_title_1"></h1></li>72         <li class="layer" data-depth="0.60"><h1 id="H1_title_2"></h1></li>73         <li class="layer" data-depth="0.30"><h1 id="H1_title_3"></h1></li>74         <li class="layer" data-depth="0.50"><h1 id="H1_title_4"></h1></li>75         <li class="layer" data-depth="1.00"><h1 id="H1_title_5"></h1></li>76     </ul>77 78 <script type="text/javascript">79     80     $(function() {81         var parallax = new Parallax(document.getElementById("DIV_title"));82         console.log(parallax);83     });84 85 </script>86 87 </body>88 </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视差效果