Android slide (lockscreen)

Android-slide-(lockscreen).markdown

Android slide (lockscreen)

Animation of the lock screen of Android 4.x

A Pen by Pascal GAULT on CodePen.

License.

index.html

<ul class="unlck">
  <li class="drag"><i class="fa fa-lock"></i></li>
  <li class="ml">
    <a href="#login-form" class="fa fa-user"></a>
  </li>
  <li class="mr">
    <a href="http://www.inrage.fr/contact" class="fa fa-envelope"></a>
  </li>
  <li class="tc">
    <a href="http://www.inrage.fr" class="fa fa-wifi"></a>
  </li>
  <li class="bc">
    <a href="http://www.inrage.fr" class="fa fa-comment"></a>
  </li>
  <li class="tr">
    <a href="https://www.facebook.com/Akiletour" class="fa fa-facebook-square"></a>
  </li>
  <li class="tl">
    <a href="https://github.com/Akiletour" class="fa fa-github"></a>
  </li>
  <li class="bl">
    <a href="http://www.inrage.fr" class="fa fa-phone"></a>
  </li>
  <li class="br">
    <a href="http://www.inrage.fr" class="fa fa-video-camera"></a>
  </li>
</ul>

<div id="login-form">
  here the form
</div>

script.js

// MOBILE COMPATIBILITY
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

// UNLOCK THE WORLD
(function($) {
  $.fn.unlck = function(callback) {
    var _this = this;
    $('.drag', this).on('mousedown', function() {
      $(this).addClass('actived');
      $(this).siblings('li').stop().animate({
        opacity: 1
      });
      _this.addClass('actived');
    });
    
    $('.drag', this).on('mouseup', function() {
      $(this).removeClass('actived');
      $(this).siblings('li').stop().animate({
        opacity: 0 
      });
      _this.removeClass('actived');
    });
    
    $('.drag', this)
      .draggable({
        'revert': true,
        'cursorAt': {
          top: 30,
          left: 30
      }
    })
      .siblings('li').droppable({
        hoverClass: "hovered",
        tolerance: 'pointer',
        drop: function (event, ui) {
          callback.call(this, event, ui);
        },
        'over': function(event, ui) {
          $(this).css({
            opacity: 1
          }).siblings('li').not('drag').stop().animate({
            opacity: '.3'
          }, 200);
        },
        'out': function(event, ui) {
          $(this).siblings('li').not('drag').stop().animate({
            opacity: 1
          }, 200);
        }
      });
  };  
})(jQuery);

// Fires the lockscreen with his custom callback
 $('.unlck').unlck(function(event, ui) {
   
   var target = $(event.target), 
       href = $('a', target).attr('href');
   
   $(ui.draggable).appendTo(target).remove();

   $('a', target).addClass('actived');
   
   
   if (/^#/.test(href)) {
     $(href).slideDown(200);
   } else {
     window.location.href = href;
   }
   
 });

style.less

@unlock-btn-size: 60px;
@unlock-font-size: (( @unlock-btn-size / 2));
@unlock-btn-color: #FFFFFF;
@unlock-drag-active-color: #f39c12;
@unlock-width: 300px;
@unlock-height: 300px;

html {
  box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; }

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background-color: #14181b;
}

// Unlock
.unlck {
  width: @unlock-width;
  height: @unlock-height;
  margin: 0 auto;
  padding: 0;
  position: relative;
  list-style: none;
  display: block;
  li {
    position: absolute;
    width: @unlock-btn-size;
    height: @unlock-btn-size;
    display: block;
    text-align: center;
    line-height: ((@unlock-btn-size - 5));
    border: 3px solid transparent;
    border-radius: @unlock-btn-size;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    font-size: @unlock-font-size;
    content: "";
    margin: 0;
    > a {
      text-decoration: none;
      color: @unlock-btn-color;
    }
    &.drag {
      border: 3px solid @unlock-btn-color;
      color: white;
      z-index: 100;
      top: 50%;
      left: 50%;
      margin-top: -(( @unlock-btn-size / 2));
      margin-left: -(( @unlock-btn-size / 2));
      opacity: 1;
      &.actived {
        color: @unlock-drag-active-color;
        border-color: transparent;
      }
    }
    &.hovered {
      background: @unlock-btn-color;
      > a {
        color: #000000;
      }
    }
    &.ml {
      top: 50%;
      left: 0;
      margin-top: -(( @unlock-btn-size / 2));
    }
    &.mr {
      top: 50%;
      right: 0;
      margin-top: -(( @unlock-btn-size / 2));
    }
    &.tc {
      top: 0;
      left: 50%;
      margin-left: -(( @unlock-btn-size / 2));
    }
    &.bc {
      bottom: 0;
      left: 50%;
      margin-left: -(( @unlock-btn-size / 2));
    }
    &.tr {
      top: 25%;
      left: 75%;
      margin-left: -10px;
      margin-top: -(( @unlock-btn-size / 2));
    }
    &.tl {
      top: 25%;
      right: 75%;
      margin-right: -10px;
      margin-top: -(( @unlock-btn-size / 2));
    }
    &.bl {
      bottom: 25%;
      right: 75%;
      margin-right: -10px;
      margin-bottom: -(( @unlock-btn-size / 2));
    }
    &.br {
      bottom: 25%;
      left: 75%;
      margin-left: -10px;
      margin-bottom: -(( @unlock-btn-size / 2));
    }
  }
  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid fade(#FFFFFF, 5%);
    width: 250px;
    height: 250px;
    content: "";
    z-index: 0;
    border-radius: 100%;
    margin-left: -125px;
    margin-top: -125px;
    opacity: 0;
  }
  &.actived {
    &:after {
      opacity: 0.7;
    }
  }
}

#login-form {
  top: 0; right: 0; left: 0; bottom: 0;
  background: black;
  color: white;
  position: absolute;
  padding: 20px;
  display: none;
  z-index: 30;
}