Question

我在Parallax.js的帮助下制作了一个自适应动画。我还使用bootstrap 2来响应并在移动设备中工作。我做的是here ...... 我的代码是

    <style>
        .container ,.container img {
            position: fixed;
        }
        .container {
        width: 1404px;
            margin-left: -30px;
            margin-top: -22px;
        }
    </style>
</head>
<body>
    <div class="container">  
        <ul id="scene" class="scene">
            <li class="layer" data-depth="0.10">
                <img src="img/back.png" alt="">
            </li>

            <li class="layer" data-depth="0.60" style="z-index:1;">
                <img src="img/page.png" alt="">
            </li> 
            <li class="layer" data-depth="0.06">
                <img src="img/tree.png" alt="">
            </li>
        </ul>
        <ul id="scene1" class="scene">
            <li class="layer" data-depth="0.20" style="z-index:-1;">
                <img src="img/alien.png" alt="">
            </li> 
            <li class="layer" data-depth="0.40" style="z-index:2;">
                <img src="img/money.png" alt="">
            </li>
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.parallax.min.js"></script>
    <script>
    $('#scene1').parallax({
        invertX: true
    });
    $('#scene').parallax({
        invertX: false
    });
    </script>

现在问题是图像尺寸应该大而且固定。所以我必须使用position：fixed和width：一些大的值，但通过这样做，我放松了我的div容器的响应。所以，无论如何要做到这一点，以便它与固定的定位和宽度保持同步。尽快帮助我。感谢

Answer 1

您应该在bootstrap.css中更改容器属性，而不是在本地页面中。我希望这会奏效。

Answer 2

发现了我的错误：P：P它的容器弄乱了：P：P 实际上，当我使用容器时，它正在修复div的大小，以便使div覆盖整个屏幕我使用

.container {
        width: 1404px;
            margin-left: -30px;
            margin-top: -22px;
        }

但这造成了问题，它使我的div大小固定为1404px。所以当我调整窗口大小时，它仍然是1404px。固定它！！通过此代码。无论如何，谢谢你的帮助!! WORKING EXAMPLE !!

<style>
    body {
        background-color:#E3E4DF;
    }
    .ram{
        position: fixed;
margin-left: -39px;
margin-top: -20px;
    };
    </style>

  </head>
  <body>
     <div class="ram">  
         <ul id="scene" class="scene">
         <li class="layer" data-depth="0.10"><img src="img/back.png" alt=""></li>

        <li class="layer" data-depth="0.60" style="z-index:1;"> <img src="img/page.png" alt=""></li> 
                      <li class="layer" data-depth="0.06"><img src="img/tree.png" alt=""> </li>
 <li class="layer" data-depth="0.20" style="z-index:0;"><img src="img/alien.png" alt=""></li> 
            <li class="layer" data-depth="0.40" style="z-index:2;"> <img src="img/money.png" alt=""></li>
            </ul>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.parallax.min.js"></script>
    <script>
$('#scene1').parallax({
invertX: true
});
    $('#scene').parallax({
invertX: false

});
    </script>

如何通过引导程序使这个视差动画响应？

2 个答案: