JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<img src="http://www.ahdimages.com/wp-content/uploads/2014/03/spring-backgrounds.jpg" data-bcg="bcg" alt="bunny" class="background" />
<img src="http://www.clipartbest.com/cliparts/9cp/bLk/9cpbLkKcE.gif" data-main-char="mchar" class="smiley" alt="smiling" />
<p class="words">Comments about nothing.</p>
<img src="http://www.ahdimages.com/wp-content/uploads/2014/03/spring-backgrounds-2.jpg" data-bcg="bcg" alt="trees" class="background" />

CSS

.background {
    width: 700px;
}
.smiley {
    width: 300px;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition-duration:2s;
}
.words {
    display: none;
}

JavaScript

window.addEventListener("scroll", function () {
    var st = document.body.scrollTop;
    var smiley = document.querySelector(".smiley");
    var para = document.querySelector(".words");
    if (st > smiley.offsetTop + 100) {
        smiley.style.marginTop = st - 450 + "px";
        para.style.display = "inline";
    }
    if (st > smiley.offsetTop - 500) {

        smiley.style.top = 50 + Math.sin(st / 40) * 45 + "%";
    }
});