CSS, jQuery

CSS ile iphone tarzı kilit örneği

Bu yazıda CSS ile iphone tarzı kilit ekranının nasıl yapıldığını öğreneceğiz. İphone tarzı kilit ekranı yaparken CSS‘in background-clip özelliğinden faydalanacağız.

Arka planda bir gradient oluşturarak animation ile background-position değerini değiştireceğiz. Bir örnek ile açıklayacak olursak;

HTML yapınız şu şekilde olsun;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS ile iphone tarzı kilit örneği</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<div class = "wrapper">
  <h2>Örneği test edebilmek için sürükleyin :)</h2>
  <div class="text">
    <div class = "text_content">
      <div id="slider"></div>
      <span>slide to unlock</span>
    </div>
  </div>
</div>
</body>
</html>

CSS kodumuz;

* {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Arial',sans-serif}
a {text-decoration: none;}
html {
  height:100%;
}
body {
    background-image: -webkit-gradient(linear,left top,left center,color-stop(0, #3b3b3b),color-stop(1, #000000));
    background-repeat: no-repeat;
  height:100%;
}

.wrapper {
  height:100%;
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.wrapper h2 {
  color:#ffffff;
  margin-bottom: 30px
}

.text {
    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;
}

.text_content {
    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('https://css-tricks.com/examples/SlideToUnlock/images/arrow.png') no-repeat;
    width: 146px;
    height: 98px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}


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

jQuery kodumuz;

$("#slider").draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(event, ui) {
      if (ui.position.left > 500) {
        $(".text").fadeOut();
      }
    },
    stop: function(event, ui) {
      if (ui.position.left < 500) {
        $(this).animate({
          left: 0
        })
      }
    }
  });

Örneğin canlı hali için buraya tıklayınız.

CSS ile windows tarzi loading bar için buraya tıklayınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir