JSFiddle - React, Tailwind, and code Playground

by Pearlin Lawrence

HTML

<div data-my-stuff="foobar"style ="height:700px"></div>
    <div class="circle"></div>
<div class = "square"></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:200px;
    height:200px;
    display:block;
    position:relative;
    top:0;left:0;
    background-color:gold;
    border-radius:100%;
}
.circle.setting {
    background-color:#f00;
}

JavaScript

/*
Paralex scrolling
document.body.scrollTop : to find out how much the scrolling was done for eg. 0 if its at top or 256 at lower.
data-my-stuff="foobar inJS we will write document.body.style.myStuff
everylastdrop.co.uk
*/

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 - 700 + "px";
    }
     
    
    //console.log(document.querySelector(".circle").offsetTop);
});
document.querySelector(".circle").addEventListener("mouseenter" , function () {
    this.classList.toggle("setting");
});