javascript - skrollr.js 响应能力

Question

我刚开始使用 Skrollr.js - 我能够制作我想要的动画，但是我需要使用 position:fixed;让我的元素准确定位它们应该在的位置。

问题是，如果您的屏幕不是特定尺寸，动画就会被 chop 或不居中。

有没有更好的方法来定位元素或者我可以用 Skrollr 解决这个问题？

我有 3 个元素组合在一起制作 Logo ，因此它需要非常精确地组合在一起。

谢谢

Answer 1

只需将这 3 个元素放在一个 div 中，这样您就只会定位该 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>