skrollr.js Responsiveness

Question

I just started using Skrollr.js - I was able to make the animations I wanted, however i needed to use position:fixed; for my elements to position them exactly where they should be.

Problem is, if your screen isn't a certain size, the animations are cutoff or not centred.

Is there a better way to position the elements or something with Skrollr I can do to fix this?

I have a 3 elements that come together to make a logo so it needs to be pretty precise in how it comes together.

Thanks

Answer 1

Just place those 3 elements inside a div, that way you will only position that div while not affecting the positioning of the elements inside it...no matter how you position the container, the elements inside will not suffer any transformation.

Here's an example:

JSFIDDLE

CSS:

#logo {
    width:200px;
    height:200px;
    position:fixed;
    top:20px;
    left:20px;
    background:red;
}
#elem1 {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    background:yellow;
}
#elem2 {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    background:blue;
}
#elem3 {
    width:200px;
    height:100px;
    position:absolute;
    bottom:0;
    background:green;
}

HTML:

<div id="logo">
    <div id="elem1"></div>
    <div id="elem2"></div>
    <div id="elem3"></div>
</div>