iPhoneのロック解除をjQueryで実現するスクリプト[js]

CSS-Tricksより、jQueryとCSS3でiPhoneのロック解除のスクリプトの紹介です。

デモページはこちらから

以下のように必要ファイルをダウンロードして、head要素内に設置をします。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.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>

HTMLのマークアップは以下のようになっています。

<div id="well">
  <h2><img src="images/arrow.png" alt="slider"> <span>slide to unlock</span></h2>
</div>

CSS

#well {
  padding: 14px 20px 20px 20px;
  -webkit-border-radius: 30px;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
  border: 2px solid #454545;
  overflow: hidden;
}

h2 {
  font-size: 80px;
  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));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  padding: 0;
  width: 200%;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100% {
    background-position: 720px 0;
  }
}

jQuery

$(function() {
	$("h2 img").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
				})
			}
		}
	});
});

これを初めて見たときは「スゲー」と声を思わずだしてしまかったくらいです。こういう発想力ができるようなクリエイタになりたいです。

なお、WebKitのみかとおもいきやFirefox3.6.8でも動作しています。