JSFiddle - React, Tailwind, and code Playground

by Vivek Vikranth

HTML

<body>
<div class="_onload">
<div id="test">
	<span id="l-1">A</span>
	<span id="l-2">B</span>
	<span id="l-3">C</span>
	<span id="l-4">D</span>
	<span id="l-5">E</span>
	</div>
</div>
    </body>

CSS

body, html{
    height:100%;
}
._onload {
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  height: 100%;
}

._onload #l-1 {
  position: absolute;
  z-index: 5;
  top: -50px;
  left: 84%;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
._onload #l-2 {
  position: absolute;
  z-index: 4;
  left: -150%;
  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}
._onload #l-3 {
  position: absolute;
  z-index: 3;
  right: -150%;
  -webkit-transition: all 1.6s ease-in-out;
  -moz-transition: all 1.6s ease-in-out;
  -o-transition: all 1.6s ease-in-out;
  transition: all 1.6s ease-in-out;
}
._onload #l-4 {
  position: absolute;
  z-index: 2;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
._onload #l-5 {
  position: absolute;
  z-index: 1;
  -webkit-transition: all 2.5s ease-in-out;
  -moz-transition: all 2.5s ease-in-out;
  -o-transition: all 2.5s ease-in-out;
  transition: all 2.5s ease-in-out;
}

JavaScript

var s_height=$(window).height();
var s_width=$(window).width();
var e_top=s_height-75;
var e_btm=40;
$('._onload').css("visibility","visible");
$('._onload #l-2,._onload #l-3').css("bottom","39px");	
$('._onload #l-1').css("top",e_top);
var posX = $('._onload #l-1').offset().left;
var lef=posX+14;
$('._onload #l-2').css("left",lef);
var pos2 = $('._onload #l-2').offset().left;
console.log("screen: "+s_width);
var lef2=s_width-pos2;
alert(lef2);
var rit=lef2-28.66;
alert(rit);
$('._onload #l-3').css("right",rit);