How to make this parallax animation responsive by bootstrap?

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

Question

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

Was it helpful?

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

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top