视差插件parallarx

 

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>

 

posted @ 2016-04-24 14:43  zcynine  阅读(196)  评论(0)    收藏  举报