jquery.parallax.js 轻量级的的视差引擎js插件-BFW插件库

jquery.parallax.js 轻量级的的视差引擎js插件

jquery.parallax.js 轻量级的的视差引擎js插件，根据智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件根据光标的位置来反映

第一步引入bfwone，dep加载jquery

第二步执行插件

示例代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.parallax"], function() {
                $('#scene').parallax({
                    calibrateX: false,
                    calibrateY: true,
                    invertX: false,
                    invertY: true,
                    limitX: false,
                    limitY: 40,
                    scalarX: 12,
                    scalarY: 18,
                    frictionX: 0.5,
                    frictionY: 1.8
                });
            });
        });
    </script>
    <style>

    </style>
</head>
<body>
    <ul id="scene" style="background:black;width:100%;height:100%;">
        <li class="layer" data-depth="0.10"><img src="http://repo.bfw.wiki/bfwrepo/image/background.jpg"></li>
        <li class="layer" data-depth="0.20"><img src="//repo.bfw.wiki/bfwrepo/image/wave-paint.png"></li>

        <li class="layer" data-depth="0.60"><img src="//repo.bfw.wiki/bfwrepo/image/board-cloud-4.png"></li>
        <li class="layer" data-depth="0.80"><img src="//repo.bfw.wiki/bfwrepo/image/board-birds.png"></li>
        <li class="layer" data-depth="0.40"><img src="//repo.bfw.wiki/bfwrepo/image/board-birds.png"></li>
        <li class="layer" data-depth="1.00"><img src="//repo.bfw.wiki/bfwrepo/image/lighthouse.png"></li>
    </ul>
</body>
</html>

jquery.parallax.js 轻量级的的视差引擎js插件

网友评论0

html2canvas.js

onepage-scroll.js

jquery.ripples-min.js

jquery.parallax.js

jquery.fullPage.js

opencv.js

Particleground.js

particles.js