How to center div circle using skrollr

Question

I am trying to recreate the effect on this site: http://www.evanshalshaw.com/more/bondcars/c6.html

I'm using the same skrollr library.

The problem is when I scroll, .sun stays justified to the left and doesn't center, past the screen, like in the example. I'm not sure what I'm missing to achieve this.

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

It's hard to say without having all the code here. I see that your HTML references .sun2 but it's not in your CSS. One thing to try: I don't think you need to to have .sun {position:fixed} since your .container already has position:fixed. Try giving .sun {position:absolute}