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. Spring框架的补充

    1.使用xml文件方式配置bean ——property标签ref属性和ref标签区别 <property name=“bean” ref="myBbean" /> r ...

  2. app token session rsp

    引用:https://blog.csdn.net/jack85986370/article/details/51362278 一.登录机制 粗略地分析, 登录机制主要分为登录验证.登录保持.登出三个部 ...

  3. Python入门：参数传递方式

    这是关于Python的第5篇文章,主要介绍下参数传递方式和如何设计自己的函数. (一) 本篇主要介绍2种参数传递方式. 位置参数 调用函数时,根据函数定义的参数位置来传递参数. def right_t ...

  4. HDU 2123 An easy problem

    http://acm.hdu.edu.cn/showproblem.php?pid=2123 Problem Description In this problem you need to make ...

  5. angular 调用element的 onfocus onkeydown onblur等事件

    项目里要实现一个input验证通过就切换到下一个input的功能 当然用jq dom操作很简单  ,大家都懂,现在用 angular,mvc 数据模型控制分离,不想再dom操作怎么办 以下方法 < ...

  6. Java机器学习框架deeplearing4j入门教程

    1.添加项目maven添加依赖 or 导入jar包 or 使用jvm <project xmlns="http://maven.apache.org/POM/4.0.0" x ...

  7. Eclipse报错Project configuration is not up-to-date with pom.xml

    1.问题 Description Resource Path Location Type Project configuration is not up-to-date with pom.xml. S ...

  8. Hadoop2.6 安装布置问题总结（单机、分布式）

    在debian7虚拟机上安装hadoop2.6,期间遇到一些问题在此记录一下. 安装参考: Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04 Hadoop集群安 ...

  9. VM ware 中win2008 找不到网卡驱动的解决办法之一

    在.vmx文件中用如下语句指定: ethernet0.virtualDev = "e1000" 其值为e1000指定网卡类型为Intel(R) PRO/1000(6.5默认为此项) ...

  10. 一千个不用Null的理由

    原文链接:http://www.importnew.com/27378.html 原文出处: xrzs 港真,Null 貌似在哪里都是个头疼的问题,比如 Java 里让人头疼的 NullPointer ...