<span></span>

<h1>Slide to Open</h1>
<p>by <a target="_blank" href="http://www.julienlejeune.be">JLNLJN</a>, inspired by <a target="_blank" href="http://www.igkhair.com/">IGK</a> / <a target="_blank" href="http://www.awwwards.com/LouisMoncouyoux/">Domani Studios</a></p>

<div id="slideToOpen">
	<div id="dot"></div>
  <div id="cache"></div> 
	<a href="#" id="close"></a>
</div>
* {
	box-sizing: border-box;
}

body {
	background: purple; 
	font-family: sans-serif;
	> span {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: black;
		opacity: .7;
	}
	> h1 {
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		text-align: center; 
		font-size: 40px;
		text-transform: uppercase;
		font-weight: 700;
		color: white;
	}
	> h1:after,
	> p:before {
		display: inline-block;
		width: 100px;
		height: 2px;
		content: '';
		background: #616161; 
		margin: 0 25px 3px;
	}
	> h1:after {
		margin: 0 25px 10px;
	}
	> p {
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		text-align: center;
		margin-top: 70px;
		font-size: 13px; 
		font-weight: 200;
		color: white;
		> a {
			color: #f1c40f;
			font-weight: 700;
			text-decoration: none;
			padding-bottom: 5px;
		}
		> a:hover {
			border-bottom: 2px solid #f1c40f;
		}
	}
}


#slideToOpen {
	position: absolute;
	top: 75%;
	height: 10px;
	left: 40%;
	right: 40%; 
	> .ui-slider-handle {
		display: block;
		width: 70px;
		height: 70px;
		border: 1px solid white; 
		position: absolute;
		top: 0;
		margin-top: -35px;
		margin-left: -35px;
		left: 0; 
		border-radius: 100%;
	}
	> .ui-slider-handle:before {
		content: '';
		position: absolute;
		display: block;
		top: 50%;
		left: 50%; 
		width: 4px;
		height: 4px;
		margin-top: -3px;
		margin-left: -3px; 
		transform: rotate(45deg);
		border-top: 2px solid black;
		border-right: 2px solid black; 
		z-index: 2;
		opacity: 1;
	}
	> .ui-slider-handle:after {
		content: '';
		position: absolute;
		display: block;
		top: 5px;
		left: 5px;
		right: 5px;
		bottom: 5px;
		background: white;
		border-radius: 100%;
		transition: .25s;
	}
	> .ui-slider-handle:hover {
		cursor: pointer;
	}
	> .ui-slider-handle:hover:after {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0; 
	}
	#cache {
		position: fixed;
		top: 75%;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		margin-left: -8px;
		border: 1px solid white; 
		z-index: 88;
		border-radius: 100%;
		transition: 1s;
	}
	#cache:after {
		content: '';
		position: absolute;
		display: block;
		top: 6px;
		left: 6px;
		right: 6px;
		bottom: 6px;
		background: white;
		border-radius: 100%;
	}
	#close {
		position: fixed;
		top: 0;
		right: -100px;
		height: 100px;
		width: 100px;
		display: block;
		z-index: 99; 
		background: black;
		transition: 0.5s;
	}
	#close:after,
	#close:before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 2px; 
		margin-top: -1px;
		margin-left: -5px;
		background: white;
		content: '';
		display: block;
	}
	#close:after { 
		transform: rotate(45deg);
	} 
	#close:before { 
		transform: rotate(-45deg);
	}
}

@keyframes dotGoRight {
	from { margin-left: 0; }
	to { margin-left: 20px; }
}

#dot {
	display: block;  
	height: 1px;
	background-image: linear-gradient(to right, white 10%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 10px 1px;
	background-repeat: repeat-x;
	position: absolute;
	top: 50%;
	margin-top: -5px;
	left: 35px;
	right: 15px;
	animation: dotGoRight 0.5s infinite linear;
}

#slideToOpen.open { 
	#cache {
		background: white;
		width: 12000px;
		height: 12000px; 
		margin-top: -6000px;
		margin-left: -6000px;
		border-radius: 0;
	} 
	> .ui-slider-handle:before { 
		opacity: 0;
	}
	#close { 
		right: 0;
		transition-delay: 1s;
	}
} 
View Compiled
$( function() {
	$( "#slideToOpen" ).slider();
});

$(document).ready(function() {

  $('#cache').css('left', parseInt($('#slideToOpen').css('width')) + parseInt($('#slideToOpen').css('left')) + 'px');

  $(window).mousemove(function(){
  
		if (parseInt($('#slideToOpen > span').css('left')) >= parseInt($('#slideToOpen').css('width'))-20 ) {
    	$('#slideToOpen').addClass('open'); 
    } else { 
    	$('#dot').css('left',parseInt($('#slideToOpen > span').css('left'))+35);
    }
		
	});

  $(window).resize(function(){ 

  	var wi = parseInt($('#slideToOpen').css('width'));
    var le = parseInt($('#slideToOpen').css('left'));

    $('#cache').css('left', wi + le + 'px');

	});

  $('#close').click(function(){ 

  	$('#slideToOpen > span').css('left','0');
    $('#slideToOpen').removeClass('open'); 

	});

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js