Touch “slide to unlock” in Mobile Safari css

2010.08.24 09:17 [레벨:1]호청년 Edit

Touch “slide to unlock” in Mobile Safari

Posted Aug 16, 2010 in Development // 9 comments

Touch “slide to unlock” in Mobile Safari

I've been reading a bit about implementing touch interfaces recently at work. I didn't realize that, for the most part, it's as easy as attaching Javascript touch events to DOM elements - just like you would with any other events in Javascript. The other thing that is a major help with Mobile Safari development is using the new CSS3 properties for animations and such. Thankfully, since you're primarily tagerting Mobile Safari/Webkit, you don't need to worry too much about cross-browser issues.

Last week, Chris Coyier wrote an article over on CSS Tricks about recreating the iphone "slide to unlock" text in Webkit/CSS3. I thought this would be a perfect opportunity to play around and take it one step further to add touch support for iphone and ipad (again, just as an experiment).

The Result

Check out the finished demo on ipad, iphone or ipod touch.

The Markup

The markup is pretty much the same as Chris'. I DID add an id to the arrow slider so that my Javascript would have a DOM hookup.

1<div id="page-wrap">
2    <div id="well">
3        <h2><img alt="slider" id="slider"src="/my-admin/arrow.png"> <span>slide to unlock</span></h2>
4    </div>
5</div>

The CSS

I copied pretty much all of Chris' CSS as well. I did however remove some of the work he did to get the cool animated text highlight since it was messing with some of the Webkit animations I added (and it wasn't really the goal of my experiment). Here is the CSS I've added:

1#well {
2    -webkit-transition: opacity 0.4s ease-out;
3}

This takes care of the fade out animation once you've slid it far enough to unlock. Technically, we'll handle the slide back animation for when you haven't slid the slider far enough in CSS as well, but we'll get to that in the Javascript part.

Here's my final combined CSS:

01/*
02     CSS-Tricks Example
03     by Chris Coyier
04     http://css-tricks.com
05*/
06 
07* { margin: 0; padding: 0; }
08html { background: black; }
09body {
10    font: 14px Georgia, serif;
11    background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0, #3b3b3b),color-stop(1, #000000));
12    background-repeat: no-repeat;
13    min-height: 350px;
14    color:#fff;
15}
16#page-wrap { width: 720px; margin: 0 auto; padding-top: 100px; }
17 
18#well {
19    padding: 14px 20px 20px 20px;