JSFiddle - React, Tailwind, and code Playground

by danieljsinclair

HTML

<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800">
    <ellipse id="e1" cy="420" cx="200" rx="420" ry="30" style="fill:#3f5566" />
    <ellipse id="e2" cy="420" cx="170" rx="390" ry="20" style="fill:#4f5566" />
    <ellipse id="e3" cy="420" cx="145" rx="370" ry="15" style="fill:#5f5566" />
    <ellipse id="e4" cy="420" cx="100" rx="370" ry="20" style="fill:#6f5566" />
    <ellipse id="e5" cy="420" cx="45"  rx="300" ry="15" style="fill:#8f5566" />
  </svg>

    <div id="content">
        <div id="test">test div</div>
        here is some text
    </div>
</body>

CSS

body {
    color:#888;
}
.background {
	background-color:#000;
	background-attachment:fixed;
	background-repeat:no-repeat;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover; 
}
.background,
#content {
    position:absolute;
    padding-bottom:100%;
    width:100%;
    top:0px;
    left:0px;
}

test {
    height:1000px;
}

JavaScript

$(document).ready(function () {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

function switchImage() {
    var s = $(window).scrollTop()/10;
    var index = Math.round(s % 5);

    $('svg ellipse').hide();
    $('svg ellipse').eq(4-index).show();
}