JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<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>

CSS

body, html {
    width:100%;
    height:100%;
}

._onload {
    visibility: hidden;
    overflow: hidden;
    position: relative;
    width:100%;
    height: 100%;
}

#test span {
    position: absolute;
    -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;
}


#l-1 {
    z-index: 5;
    top: -50px;
    left: 84%;
}

#l-2 {
    z-index: 4;
    left: -150px;
}

#l-3 {
    z-index: 3;
    right: -150px;
}

#l-4 {
    z-index: 2;
}

#l-5 {
    z-index: 1;
}

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");

$('#l-2, #l-3').css("bottom","39px");	

$('#l-1').css("top",e_top);

var posX = $('._onload #l-1').offset().left;
var lef=posX+14;

$('#l-2').css("left",lef);

var pos2 = $('#l-2').offset().left;

console.log("screen: "+s_width);

var lef2=s_width-pos2;

alert(lef2);

var rit=lef2-28.66;

alert(rit);

$('#l-3').css("right",rit);