Slide Unlock Jquery JavaScript + CSS

Click Image to view Large

HTML Code

<html>
<head>
<meta charset='UTF-8'>
<title>Slide To Unlock</title>
<link rel='stylesheet' href='css/style.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='js/slidetounlock.js'></script>
</head>
<body>
<div id="page-wrap">
<div id="well">
<h2><strong id="slider"></strong> <span>slide to unlock</span></h2>
</div>
</div>
</body>
</html>

CSS Code

* { margin: 0; padding: 0; }
html { background: black; }
body {
font: 14px Georgia, serif;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b3b3b),color-stop(1, #000000));
background-repeat: no-repeat;
min-height: 350px;
}
#page-wrap { width: 720px; margin: 0 auto; padding-top: 100px; }
#well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
border: 2px solid #454545;
overflow: hidden;
-webkit-user-select: none;
}
h2 {
background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

-moz-background-clip: text;
-webkit-background-clip: text;

-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;

-webkit-animation: slidetounlock 5s infinite;

font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;

padding: 0;
width: 200%;

-webkit-text-size-adjust: none;
}
#slider {
background: url(../images/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}

Javascript Code

$(function() {
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
}
},
stop: function(event, ui) {
if (ui.position.left < 551) {
$(this).animate({
left: 0
})
}
}
});
$('#slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 73;
if(curX <= 0) return;
if(curX > 550){
$('#well').fadeOut();
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
$('#slider')[0].addEventListener('touchend', function(event) { this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
this.style.webkitTransform = 'translateX(0px)';
}, false);
});