skrollr.js Отзывчивость

Question

Я только начал использовать Skrollr.js - мне удалось сделать анимацию, которую я хотел, однако мне нужно было использовать позицию: fixed; для моих элементов, чтобы они точно определяли, где они должны быть.

Проблема в том, что если ваш экран не является определенным размером, анимации обрезаются или не центрируются.

Есть ли лучший способ расположить элементы или что-то с помощью Skrollr? Я могу это исправить?

У меня есть 3 элемента, которые собираются вместе, чтобы сделать логотип, поэтому он должен быть довольно точным в том, как он объединяется.

Благодаря

Answer 1

Просто поместите эти 3 элементы внутри DIV, таким образом, вы только положение, что Див пока не влияет на расположение элементов внутри него ... независимо от того, как вы поместите контейнер, элементы внутри не пострадает.

Вот пример:

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>