How to make this parallax animation responsive by bootstrap?

StackOverflow https://stackoverflow.com/questions/20394634

Pergunta

I just made a responsive animation with the help of Parallax.js. Also i used bootstrap 2 to make responsive and working in mobile devices also. What i made is here... my code is

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

now problem is the image size should be large and fixed. so i have to use position:fixed and width: some large value but by doing that i loose the responsiveness of my div container. So is there anyway to make this work so that it remain responsive along with fixed positioning and width. help me ASAP. thanks

Foi útil?

Solução 2

found my mistake :P :P its container that messing up :P :P actually when i was using container it was fixing the size of the div so to make the div cover whole screen i used 

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

but this was creating the problem it make my div size fixed to 1404px. so when i resize my window it remain 1404px. Fixed it!! by this code. Anyways thanks for help !! 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>

Outras dicas

You should change the container attributes in bootstrap.css, not in your local page. I hope this will work.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top