Question

我正在尝试在此网站上重新创建效果：http://www.evanshalshaw.com/more/bondcars/c6.html

我正在使用相同的skrollr库。

问题是当我滚动时，.sun保持向左对齐而不是居中，越过屏幕，就像在示例中一样。我不确定为了达到这个目标我缺少什么。

HTML：

<div class="container">
    <div class="sun sun2"
        data-0="opacity:0;width:120px;height:120px;"
        data-2200=""
        data-2201="opacity:1;"
        data-2400=""
        data-2800="width:3000px;height:3000px;">

        <div class="feature feature1"></div>
    </div>
</div>

CSS：

.container {
    position: fixed;
}
.sun {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    margin: auto;
    background: white;
    overflow: hidden;
}
.sun1 { 
    z-index: 10;
}
.feature {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    width: 100%;
    height: 100%;
    display: block;
    background: url(/images/Scene2Phone.gif) no-repeat;
    background-position: center center;
}

Answer 1

如果没有这里的所有代码，很难说。我看到你的HTML引用.sun2但它不在你的CSS中。有一件事要尝试：我认为您不需要拥有[self setColorConstrains:15.0 :29.9 :18.5 :24.9 :value]，因为.sun {position:fixed}已经有.container。尝试提供position:fixed

如何使用skrollr将div圆心对齐

1 个答案: