如何通过引导使该视差动画响应？

Question

我只是在Parallax.js的帮助下制作了响应式动画。 我也使用了bootstrap 2来使响应和在移动设备中工作。 我在这里做的 ...我的代码是

    <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。 修复！！ 通过此代码。 无论如何，谢谢您的帮助！ 工作示例！

<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>