» » Slide To Unlock (iPhone Style)

Slide To Unlock (iPhone Style)

Diposting oleh Unknown -
GxB mau posting nih, nyolong waktu :D ngandelin paket di handphone aja :D lol

ok lah langsung ke TKP =D


nih gini gambar Slide to unlock dengan iPhone Style
demo nyusul

nah bagaimana caranya?
ok langsung ikutin aja


login blog > Template > Edit HTML > Expand Template Widgets

#Note :
-letakan CSS di atas kode ]]></b:skin>
-letakan HTML didalam/dibawah kode <body>
-letakan jquery diatas kode </head>

CSS
#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden; 
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}

#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F); 
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F)); 
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsm0bF_Dq6AFXuCZQTqcYapHpo97TbybkOFO4TNjOG3YHSVufPgjeJc7wdo-fIGGgcG-ojcslNbC7e5Gsi-bw9M8irFBqyZIF0_sucA5WLGF4hs2PmO_B3Roz7wA1ygnkwacsMlLG1GEQ/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}

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

.bgslide {background:#000;width: 722px;
border-radius: 15px;}

HTML
<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>

Jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>


ok sekian aja dah :D
sumber : http://djogzs.blogspot.com/2012/10/iphone-style-slide-to-unlock-dengan.html
Label: ,

Posting Komentar - Back to Content