Crear un efecto «desbloquear» de iPhone

Seguro que en alguna ocasión te gustaría hacer una versión de tu web para dispositivos móviles y añadir un toque iPhone. Es por esto que Chris Coyier ha creado un efecto «slide to unlock» en el que podemos apreciar, sobretodo en motores WebKit, el efecto a todo rendimiento.

Entre otras cosas, hay ese efecto degradado y gracias a jQuery también la posibilidad de hacer ese efecto slide.

El sistema aprovecha códigos CSS como el -webkit-animation: slidetounlock 5s infinite; y la función -webkit-keyframes slidetounlock.

El ejemplo funciona en motores Webkit al 100% (Safari y Chrome), aunque se pueden analizar los códigos del CSS y JavaScript.

Código CSS


* { 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;
  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%;
}
h2 img {
  vertical-align: middle;
}
@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100%{
    background-position: 720px 0;
  }
}


Código JavaScript


$(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         })       }     }   }); });