JSFiddle - React, Tailwind, and code Playground

by Pearlin Lawrence

HTML

<div id="topDiv" style="height: 1000px; no-repeat;">

<div style="position: absolute; width: 50%; margin-left: 25%; top: 70%; text-align: center;opacity: 1;">
<img src="http://ak2.picdn.net/shutterstock/videos/1963495/preview/stock-footage-flying-rose-petals-in-the-sky-with-sun-hd-looped-animation.jpg"> 
<h1>This is an Example</h1>
    </div>

</div>

CSS

body {
    margin: 0px;
   background-attachment:fixed;
    background-image:url(http://blogs.bournemouth.ac.uk/research/files/2012/01/bluesky.jpg);
    /*background-image: url(http://3.bp.blogspot.com/_SmrNAjqSf58/S_vs05h-fbI/AAAAAAAAALI/j-U9KIJnIZw/s1600/4004951.jpg);*/
    /* url(http://3.bp.blogspot.com/_SmrNAjqSf58/S_vs05h-fbI/AAAAAAAAALI/j-U9KIJnIZw/s1600/4004951.jpg), url(http://3.bp.blogspot.com/_SmrNAjqSf58/S_vs05h-fbI/AAAAAAAAALI/j-U9KIJnIZw/s1600/4004951.jpg);*/
    /*background-position:100px 0, 0 100px, 250px 200px;*/
}
#layer_1 {
    position: fixed;
   /* background-image: url (http://3.bp.blogspot.com/_SmrNAjqSf58/S_vs05h-fbI/AAAAAAAAALI/j-U9KIJnIZw/s1600/4004951.jpg);*/
    background-repeat: no-repeat;
    background-position: 0px 200px;
    -webkit-opacity: 0;
    opacity: 0;
    width:50%;
    height:800px;
}
#layer_2 {
    position:fixed;
    /*background-image: url(http://3.bp.blogspot.com/_SmrNAjqSf58/S_vs05h-fbI/AAAAAAAAALI/j-U9KIJnIZw/s1600/4004951.jpg) no-repeat 600px 400px;*/
    background-repeat: no-repeat;
    background-position: 600px 400px;
    width:100%;
    height:1000px;
}

JavaScript

/*function parallax() {
    var lyr_1 = document.getElementById('layer_1');
    var lyr_2 = document.getElementById('layer_2');
    lyr_1.style.top = -(window.pageYOffset / 4) + 'px';
    lyr_2.style.top = -(window.pageYOffset / 8) + 'px';
}
window.addEventListener("scroll", parallex, false);
window.addEventListener("scroll", function () {
     var st = document.body.scrollTop;
    document.body.style.backgroundPosition = 
           100 + Math.sin(st/5) * 10 + "px 0," +
              "0 " + Math.floor(100+st*1.5) + "px," +
        "250px " + Math.floor(200+st*2) + "px";
    
    });*/
var topDiv = document.getElementById("topDiv");

var speed = 1.5;

window.onscroll = function()

{

var yOffset = window.pageYOffset;

topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";

};