Slide to Unlock dengan Jquery dan CSS3

3/01/2013 By Agung DeidaraRyu 0 komentar
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D1vq6IYrlPgqHHXRUr1zkqc7cJDBK6LiPl-nDLYpvfcL81YGvII0YLTIzOjfE-9q8Rk31miu5KjnpL5-YWKMS8m5LJEspFbusHepahTiLjJVUCDUW1owyDc3lgUUf323bEpkI0TZj6w/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.

About the Author

Author

My name is Agung Prastyo. Nineteen my Age. I from Pekanbaru City.


0 komentar:

Syarat Berkomentar :

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

Salam DND Ryujinki (^_\ \

Langganan: Posting Komentar (Atom)

Recent Comment