Star Scroller

Simple parallax example

by Alma Grace

HTML

<div data-my-stuff="foobar" style="height:700px">
</div>
<div class="circle"></div>
<div data-my-stuff="foobar" style="height:700px">
</div>

CSS

body {
    background-color:#000;
    background-image:url(http://testcollectivator.com/images/stars.png), url(http://testcollectivator.com/images/stars.png), url(http://testcollectivator.com/images/stars.png);
    background-position:100px 0, 0 100px, 250px 200px;
}
.circle {
    width:100px;
    height:100px;
    display:block;
    position:relative;;
    top:0;left:0;
    background-color:gold;
    border-radius:100%;
    -webkit-transition-duration:2s;
}
.circle.setting {
    background-color:#f00;
}

JavaScript

window.addEventListener("scroll", function() {
    var st = document.body.scrollTop;
    var sun = document.querySelector(".circle");
    document.body.style.backgroundPosition = 
        100 + Math.sin(st/50)*20 + "px 0," +
        "0 " + Math.floor(100 - 1.5*st) + "px," +
        "250px " + Math.floor(200-4*st) + "px";
    if(st > sun.offsetTop-200) {
        sun.style.marginLeft = st - 500 + "px";
    } //console.log(document.querySelector(".circle").offsetTop);
});

document.querySelector(".circle").addEventListener("mouseenter", function() {
    this.classList.add("setting");
});