Slide to Unlock dengan Jquery dan CSS3

langsung saja cara pasang'a,pertama copy paste CSS yang sudah saya modifikasi dibawah ini(tidak sama dengan blog saya,ini css dasar'a),lalu copas juga HTML dan Jquery'a:

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(http://3.bp.blogspot.com/-UWPmToPSpzo/UH0iTkibr3I/AAAAAAAADUg/rIvLHbvNMrk/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'/>

saya agak malas reupload js'a~xD
bila merasa hosting'a terasa agak lelet,tinggal download dan re-upload js'a di sites.google.com

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



selesai deh,jelas sekali bukan?nanti tampilan'a menjadi seperti ini


contoh diatas,agak berbeda dengan yang aslinya di 
http://css-tricks.com/examples/SlideToUnlock/

http://sword-art-online-blogger-template.blogspot.com/


kenapa?trik yang asli tidak melayang dan tidak fullscreen.

sedangkan yang sudah saya modifikasi melayang,dan fullscreen.

kenapa agak beda dengan blog saya? jangan samalah,kalian bisa memodif'a sendiri dengan kreasi kalian sendiri... ^^

selamat mencoba dan belajar~xDD
semoga trik ini cukup bermanfaat,dan tolong jangan cuma asal copas postingan saya dan mengaku".Dosa tau :p

sertakan Sumbernya bila anda mau mengcopy paste artikel ini. iPhone Style, slide to unlock dengan jquery dan CSS3 http://djogzs.blogspot.com/#ixzz2Pr1FvKN2
Under Creative Commons License: Attribution


Semoga Bermanfaat.

0 komentar:

Syarat Berkomentar :

-Coment yang sopan !!
-Tidak mengandung kata2 Negatif.
-Dilarang Menghina dll.

Salam DND Ryujinki (^_\ \

Recent Comment