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

【问题标题】：How to make this parallax animation responsive by bootstrap?如何通过引导程序使这个视差动画响应？
【发布时间】：2014-04-04 20:13:05
【问题描述】：

我刚刚在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 容器的响应能力。那么无论如何要使这项工作保持响应性以及固定的位置和宽度。尽快帮助我。谢谢

【问题讨论】：

标签： jquery css twitter-bootstrap parallax parallax.js

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：