github上的demo，自己拿来改了改。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>parallax</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

        .container{

            width:100%;

            height:600px;

            background: #444;

        }

        .wrapper{

            width:50%;

            height:600px;

            margin:0 auto;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="wrapper">

            <ul id="scene">

                <li class="layer" data-depth="0.00"><img src="./img/layer1.png"></li>

                <li class="layer" data-depth="0.20"><img src="./img/layer2.png"></li>

                <li class="layer" data-depth="0.40"><img src="./img/layer3.png"></li>

                <li class="layer" data-depth="0.60"><img src="./img/layer4.png"></li>

                <li class="layer" data-depth="0.80"><img src="./img/layer5.png"></li>

                <li class="layer" data-depth="1.00"><img src="./img/layer6.png"></li>

            </ul>

        </div>

    </div>

    <!--<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>

    <script type="text/javascript" src="./js/parallax/jquery.parallax.min.js"></script>-->

    <script type="text/javascript" src="./js/parallax/parallax.min.js"></script>

    <script type="text/javascript">

        //var scene = $("#scene");

        var scene = document.getElementById('scene');

        var parallax = new Parallax(scene);

    </script>

</body>

</html>

视差插件parallarx的更多相关文章

  1. 15+优秀的jQuery视差插件

    jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了! 原文地址:http://www.goodfav.com/jquery-parallax-plu ...

  2. 滚动视差插件skrollr.js

    东西虽好,但也不能懒到自己一点都不去做总结,那么下方将会写出从网上找到,比较好的网址(应该是根据官网翻译的). 自己先做一个总结:这个插件兼容上做到了降级处理,虽然低端浏览器没有那么顺畅的效果,但是勉 ...

  3. 8款给力HTML5/CSS3应用插件 可爱的HTML5笑脸

    1.HTML5/CSS3实现笑脸动画 非常可爱 今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 在线演示 源码下载 2 ...

  4. Jquery的部分插件

    jQuery Easing:jQuery 动画效果扩展 jQuery Migrate:jQuery 应用迁移辅助插件Modernizr:专为HTML5和CSS3开发的功能检测类库jQuery Flex ...

  5. 2014 年 20 款最好的 CSS 工具

    说到 WEB 设计,不得不介绍介绍 CSS 工具,CSS 工具在这里面扮演很重要的角色,可以简化无数开发者和设计师的工作,写出更好的 CSS 代码. 而网上有非常多的 CSS 工具,帮助设计师和开发者 ...

  6. 67 个JavaScript和CSS实用工具、库与资源

    在这篇文章中,我不会与大家谈论大型的前端框架,如 React.Angular.Vue 等,也没有涉及那些流行的代码编辑器,如 Atom.VS Code.Sublime,我只想与大家分享一个有助于提升开 ...

  7. JavaScript和CSS实用工具、库与资源

    JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js  - 用于在网页上创建 3 ...

  8. Parallax.js – 自适应智能设备方向的视差效果插件

    Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应.在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替.有很多的行为,你就可以设置为任何给定的视差实例. ...

  9. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

随机推荐

  1. 《构建之法》第四&十七章读书笔记

     <构建之法>第四&十七章读书笔记 一．         前言 再次阅读<构建之法>,愈发被其中生动有趣的举例吸引.作为一本给予软件工程学生的书籍,其不以枯燥的理论知识 ...

  2. 团队作业4--第一项目冲刺3（Aplpha）

    1.会议 第三次会议: ①:总结前两天出现的问题 ②:总结前端学习的心得 ③:安排后两天任务 2.任务安排 3.任务分解图 4.燃尽图 5.适当的项目程序/模块的最新(运行)截图 6.心得 组员之间要 ...

  3. Gradle入门（4）：依赖管理

    在现实生活中,要创造一个没有任何外部依赖的应用程序并非不可能,但也是极具挑战的.这也是为什么依赖管理对于每个软件项目都是至关重要的一部分. 这篇教程主要讲述如何使用Gradle管理我们项目的依赖,我们 ...

  4. iOS App之间常用的五种通信方式及适用场景总结

    iOS系统是相对封闭的系统,App各自在各自的沙盒(sandbox)中运行,每个App都只能读取iPhone上iOS系统为该应用程序程序创建的文件夹AppData下的内容,不能随意跨越自己的沙盒去访问 ...

  5. Hive如何加载和导入HBase的数据

    当我们用HBase 存储实时数据的时候, 如果要做一些数据分析方面的操作, 就比较困难了, 要写MapReduce Job. Hive 主要是用来做数据分析的数据仓库,支持标准SQL 查询, 做数据分 ...

  6. ubuntu下安装vsftpd及vsftpd配置文件不见的解决办法

    利用命令 sudo apt-get install vsftpd   //安装 进入etc文件可以找到 vsftpd.conf的配置文件 作为新手难免会弄错配置又不知道怎么办,那么可能会利用 sudo ...

  7. java中的Serializable接口的作用

    实现java.io.Serializable 接口的类是可序列化的.没有实现此接口的类将不能使它们的任一状态被序列化或逆序列化. 序列化类的所有子类本身都是可序列化的.这个序列化接口没有任何方法和域, ...

  8. Struts1 工作流程

    一个老项目的维护 , 需要学习一下 Struts1. struts1运行步骤 1.项目初始化:项目启动时加载 web.xml,struts1 的总控制器 ActionServlet 是一个 Servl ...

  9. html template & iframe

    html template & iframe https://bbs.csdn.net/topics/390123946 据说可以利用某些浏览器bug绕过跨域限制,可以也研究下; 由于浏览器对 ...

  10. ACdream1092

    题意是给出某个地鼠的出现位置以及出现时间,人有一个移动速度,求此人最多可以打多少个地鼠? 我们根据时间把所有的地鼠排序,如果两个地鼠之间的距离不超过时间只差与速度的乘积,那说明打完上一只地鼠还可以打到 ...