JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
		
<div id="container">

        <div class="bg" style="background-color:red" 
			data-0="transform:translate3d(0%,0%,0); opacity:1" 	
			data-5000="transform:translate3d(-100%,0%,0); opacity:0">
		</div>
	
		<div class="bg" style="background-color:green; " 
			data-0="transform:translate3d(100%,0%,0); opacity:0" 	
			data-5000="transform:translate3d(0%,0%,0);opacity:1"
			data-10000="transform:translate3d(-100%,0%,0);opacity:0">
		</div>

		<div class="bg" style="background-color:orange" 
			data-5000="transform:translate3d(100%,0%,0); opacity:0" 	
			data-10000="transform:translate3d(0%,0%,0); opacity:1">
		</div>
</div>

CSS

#container {
    background-color:black;
    width:100%;   
    height:300px;
    overflow:hidden;

}
div {position:fixed;}

.bg {
  width:100%; 
  height:300px; 
   }

JavaScript

skrollr.init();