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. Linux(Red hat)无网离线安装TensorFlow

    文件下载 首先,下载想要安装的版本,目前最新的是1.8.0 根据你的python版本下载对应的whl文件,下载连接:https://pypi.org/project/tensorflow/#files ...

  3. CountVectorizer，Tf-idfVectorizer和word2vec构建词向量的区别

    CountVectorizer和Tf-idfVectorizer构建词向量都是通过构建字典的方式,比如在情感分析问题中,我需要把每一个句子(评论)转化为词向量,这两种方法是如何构建的呢?拿CountV ...

  4. Promise 记录

  5. 第二次结对作业-WordCount进阶需求

    原博客 队友博客 github项目地址 目录 具体分工 需求分析 PSP表格 解题思路描述与设计实现说明 爬虫使用 代码组织与内部实现设计(类图) 算法的关键与关键实现部分流程图 附加题设计与展示 设 ...

  6. 关闭SSD（固态硬盘）节能功能 提搞SSD性能

     此方法可以缓解比如QQ聊天时能明显感觉到打字过程不连续,0.1s左右的间歇停顿,操作系统并不会锁死,系统突然停止响应,硬盘灯狂闪,鼠标指针成为圆圈,点什么都没反应,这种状况可能会持续1-2分钟, ...

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

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

  8. Little Elephant and Array CodeForces - 220B（莫队）

    给一段长为n的序列和m个关于区间的询问,求出每个询问的区间中有多少种数字是 该种数字出现的次数等于该数字 的. #include <iostream> #include <cstdi ...

  9. BZOJ 1014 火星人 | 平衡树维护哈希

    BZOJ 1014 火星人 题意 有一个字符串,三中操作:在某位置后面插入一个字符.修改某位置的字符.询问两个后缀的最长公共前缀. 题解 看到网上的dalao们都说这道题是平衡树,我就很懵x--平衡树 ...

  10. 【BZOJ1502】【NOI2005】月下柠檬树

    Portal 传送门 Solution 显然的是,每一个圆的影子,就是从树上的圆按光线方向平移至地面的圆.至于两个圆之间的连接部分,则是每两个在树上相邻的圆的,对应的影子圆的,公切线围起来的部分,如下 ...