Connection Lost CSS Bubble

by Luca De Nardi

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Lato:100,400"></script>
<div class="container">
    <div class="cell">
    	<div class="offlineText">
            <span>YOU ARE</span><br />
	    	<span>OFFLINE</span>
	    </div>
    </div>
    <div class="dark"></div>
    <img class="plug left plugged" src="http://i.imgur.com/azf1fHu.png" />
    <img class="plug right plugged" src="http://i.imgur.com/DKvMVmq.png" />
</div>
<button onclick="toggle()" style="position:absolute;top:0;left:0;z-index:1500">Toggle</button>

CSS

html, body{
    margin:0;
    padding:0;
    overflow:hidden
}
.container{
    height:100vh;
    width:100vw;
    background:#2d2d2d;
}
.dark{
    position:fixed;
    top:0;
    left:0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
    height:0;
    width:100vw;
    transition: .5s all ease-in-out;
}
.exp ~ .dark{
    height:100vh;    
}
.cell{
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background:#00abff;
    height: 50vh;
    max-height:50vh;
    width:0;
    transition: .5s all ease-in-out;
    z-index:1000;
}
.exp{
    width:100vw;
}
.plug{
    width:0;
    position:fixed;
    max-height:50vh;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index:1001;
}
.left:not(.plugged){
    left: 6% !important;
}
.right:not(.plugged){
    left: 95% !important;
}
.left.plugged{
    left: 34%;
}
.right.plugged{
    left: 74%;
}
.offlineText{
	position: absolute;
    max-height:40vh;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
.offlineText span{
	font-family: 'Lato';
	font-weight: 100;
    font-size:0;
}

JavaScript

function toggle(){
		    if($('.cell').hasClass('exp')){
		        $('.plug').addClass('plugged');
		        setTimeout(function(){
		        	$('.offlineText span').css('fontSize', '0px');
		            $('.cell').removeClass('exp');
		            $('.plug').css('transition', 'none');
		        }, 400);
		        setTimeout(function(){
		            $('.plug').css('width', '0');
		        }, 900);
		    }else{
		        $('.plug').addClass('plugged');
		        $('.plug').css('width', '50vw');
		        $('.cell').addClass('exp');
		        setTimeout(function(){
		        	$('.offlineText span').css('fontSize', '50px');
		        	$('.plug').css('transition', '.35s all ease-in');
		            $('.plug').removeClass('plugged');
		        }, 450);
		    }
		}