<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div id="unlock">
<div class="title">Discover</div>
<div class="subtitle">All Icons</div>
<div class="content">
<div class="drag">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 10">
<path fill-rule="evenodd" d="M 3.51 7.67 C 3.32 7.67 3.13 7.59 2.98 7.44 L -0.78 3.63 C -1.07 3.34 -1.07 2.85 -0.78 2.56 C -0.49 2.26 -0.01 2.26 0.28 2.56 L 3.51 5.83 L 6.74 2.56 C 7.04 2.26 7.51 2.26 7.81 2.56 C 8.1 2.85 8.1 3.34 7.81 3.63 L 4.05 7.44 C 3.9 7.59 3.71 7.67 3.51 7.67" />
</svg>
</div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="drop">
<div class="wave"></div>
</div>
</div>
</div>
<div id="home">
<div class="restart">Start again ? Click !</div>
</div>
</div>
</body>
</html>body, html, *
{
padding: 0px;
margin: 0px;
}
body, html {
width: 100%;
height: 100%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container
{
overflow: hidden;
height: 300px;
width: 300px;
background-image: linear-gradient(136deg, #ff7a7a 0%, #ff7ab6 100%);
position: absolute;
border-radius: 5px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* ------ UNLOCK ------ */
#unlock
{
font-family: helvetica;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 186px;
height: 73px;
text-align: center;
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#unlock.unlock
{
opacity: 0;
-webkit-transform: translate(-486px,-50%);
-ms-transform: translate(-486px,-50%);
-o-transform: translate(-486px,-50%);
transform: translate(-486px,-50%);
}
#unlock .title
{
opacity: 0.5;
color: #FFF;
font-size: 11px;
}
#unlock .subtitle
{
color: #FFF;
font-size: 16px;
}
#unlock .content
{
width: 186px;
height: 40px;
margin: auto;
position: relative;
text-align: center;
}
#unlock .content:after
{
content: 'drag';
color: #FFF;
font-size: 11px;
font-family:f-gm;
position: absolute;
left: 50%;
bottom: -5px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
#unlock .content .drag
{
cursor:pointer;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor:grab;
width: 40px;
height: 40px;
background-color: rgba(255,255,255, 0.1);
border: 1px solid #FFF;
border-radius: 100px;
position: absolute;
z-index: 1;
left: 0px;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-ms-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
transition: background-color .25s ease;
}
#unlock .content .drag:active
{
cursor:ns-resize;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor:grabbing;
background-color: rgba(255, 255, 255, 0.6);
}
#unlock .content .drag svg
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%) rotate(-90deg);
-ms-transform: translate(-50%,-50%) rotate(-90deg);
-o-transform: translate(-50%,-50%) rotate(-90deg);
transform: translate(-50%,-50%) rotate(-90deg);
height: 10px;
fill: #FFF;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#unlock .content .drag:active svg
{
fill: #FFF;
}
#unlock .content .dot
{
display: inline-block;
position: relative;
vertical-align: top;
width: 2px;
height: 100%;
}
#unlock .content .dot:after
{
content: '';
height: 1px;
width: 1px;
border-radius: 2px;
background-color: #FFF;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#unlock .content .drop
{
width: 40px;
height: 40px;
border: 1px solid rgba(255,255,255, 0.2);
border-radius: 100px;
position: absolute;
right: 0px;
top: 0px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#unlock .content .drop.active
{
border: 1px solid rgba(255, 255, 255, 0.5);
}
#unlock .content .drop.hover
{
border: 1px solid rgba(255, 255, 255, 0.5);
}
#unlock .content .drop .wave
{
width: 19px;
height: 19px;
background-color: rgba(255,255,255, 0.2);
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#unlock .content .drop.active .wave
{
background-color: rgba(255,255,255, 0.5);
}
#unlock .content .drop.hover .wave
{
background-color: rgba(255,255,255, 0.5);
-webkit-transform: translate(-50%,-50%) scale(1.7);
-ms-transform: translate(-50%,-50%) scale(1.7);
-o-transform: translate(-50%,-50%) scale(1.7);
transform: translate(-50%,-50%) scale(1.7);
}
/* ------ END UNLOCK ------ */
/* HOME */
#home
{
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#home.unlock
{
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.restart
{
font-family: helvetica;
color: #FFF;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* END HOME *//* SLIDE TO UNLOCK */
$(function() {
$("#unlock .drag").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
$('#unlock .content .drop').addClass('active');
if (ui.position.left > 105) {
$('#unlock .content .drop').addClass('hover');
}
},
stop: function(event, ui) {
if (ui.position.left < 105) {
$(this).animate({
left: 0
})
$('#unlock .content .drop').removeClass('hover');
$('#unlock .content .drop').removeClass('active');
} else {
$(this).animate({
left: 0
})
$('#unlock .content .drop').removeClass('hover');
$('#unlock .content .drop').removeClass('active');
// UNLOCK
$('#unlock').addClass('unlock');
$('#home').addClass('unlock');
}
}
});
});
/* END SLIDE TO UNLOCK */
$('.restart').click(function(){
$('#unlock').removeClass('unlock');
$('#home').removeClass('unlock');
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.