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. cobbler技术详解（是PXE二次详解）

    Cobbler是PXE的二次封装,使用Python语言开发, 可以用来快速建立 Linux 网络安装环境,它已将 Linux 网络安装的技术门槛,从大专以上文化水平,成功降低到初中以下,连补鞋匠都能学 ...

  2. 6/9 sprint2 看板和燃尽图的更新

  3. Struts hibernate Spring 框架原理

    转自:http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html 原理:1.通过Configuration().configur ...

  4. Longest Substring with At Most Two Distinct

    Given a string, find the length of the longest substring T that contains at most 2 distinct characte ...

  5. rpc 协议规范 之 rmi http webservice 和 一些框架

    RPC(Remote Procedure Call)是远程调用,是一种思想,也是一种协议规范.简单地说就是能使应用像调用本地方法一样的调用远程的过程或服务,可以应用在分布式服务.分布式计算.远程服务调 ...

  6. java中new两个对象，在堆中开辟几个对象空间

    内存堆中有两个对象,两个对象里都有独立的变量.p1 p2指向的不是同一个内存空间. 也可以这样描述引用p1,p2指向两个不同的对象.

  7. shell的sort命令

    sort命令以行为单位对文本进行排序. 命令语法: sort [-b/d/f/g/i/M/n/r] [InFile] 参数解释: -b: ignore-leading-blanks,忽略前面空格符部分 ...

  8. Machine Learning CodeForces - 940F（带修改的莫队）

    题解原文地址:https://www.cnblogs.com/lujiaju6555/p/8468709.html 给数组a,有两种操作,1 l r查询[l,r]中每个数出现次数的mex,注意是出现次 ...

  9. SpringBoot之使用jpa/hibernate

    Springboot版本是2.1.3.RELEASE 1.依赖 List-1.1 <dependency> <groupId>org.springframework.boot& ...

  10. 【转】关于在linux下清屏的几种技巧

    在windows的DOS操作界面里面,清屏的命令是cls,那么在linux 里面的清屏命令是什么呢?下面笔者分享几种在linux下用过的清屏方法. 1.clear命令.这个命令将会刷新屏幕,本质上只是 ...