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. vim python和golang开发环境配置

    首先在-下新建目录.vim和配置文件.vimrc,.vimrc内容如下: syntax on set nocompatible filetype off set rtp+=~/.vim/bundle/ ...

  2. p4factory下 targets/basic_rout

    p4factory/targets/basic_routing/p4src代码解读 headers.p4 header_type ethernet_t { fields { dstAddr : 48; ...

  3. 基于CORBA/WEB技术构建三层体系结构的应用

    1 问题提出 在应用系统开发过程中,CLIENT/SERVER体系结构得到了广泛的应用 .其特点是,应用程序逻辑通常分布在客户和服务器两端,客户端发出数据资源访问请求,服务器端将结果返回客户端.但CL ...

  4. MongoDB安装笔记

    2017年11月17日,在Windows Service 2008R2上成功安装MongoDB. 版本:mongodb-win32-x86_64-2008plus-ssl-3.4.6-signed.m ...

  5. C++中的栈内存和堆内存的区别

    数据结构中的堆与栈: 栈:是一种连续储存的数据结构,具有先进后出的性质.通常的操作有入栈(圧栈).出栈和栈顶元素.想要读取栈中的某个元素,就要将其之前的所有元素出栈才能完成.类比现实中的箱子一样. 堆 ...

  6. http和https的优缺点,区别与工作原理

    文章内容 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可 ...

  7. sublinme 快捷键格式

    {"keys": ["ctrl+shift+f"], "command": "reindent" , "arg ...

  8. SQL语句查询一个数据库中的所有表

    --读取库中的所有表名 select name from sysobjects where xtype='u' --读取指定表的所有列名 select name from syscolumns whe ...

  9. 浅谈C++/JAVA/C#运行机制和执行效率

    估计有很多同学都对C++/JAVA/C#这三大热门语言的运行机制和执行效率有或多或少的困惑,自己也有,但是经过前期的学习,了解了三者在这两方面的区别,就废话不说了,进入主题吧.         一.运 ...

  10. UVA11374_Airport Express

    给一个无向图,有的边是特殊边,最多可以取一条特殊边,求最短路,并且输出路径. 这样考虑,加入所有非特殊边,求出每个点到起点和终点的最短路.然后加入特殊边的时候,如果取当前这条特殊边,那么答案会是两点预 ...