Posted by : Agung DeidaraRyu
Jumat, 01 Maret 2013
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/AVvXsEi2PD_77GwR1vDe4yD-N1K532MvMZFcoSDmdQ26rpziYVep5knxNENreSKSaRWNerjiazhi8wBNQDqap4RVOGNj7J6QrItkPewO6D4rFGIFGvyRBshSbUQT62X5VJa6IcV0DncAXjou6uo/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 inicontoh 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~xDDsemoga 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.
Anda Sekarang Sedang Baca Artikel Tentang Slide to Unlock dengan Jquery dan CSS3 , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Slide to Unlock dengan Jquery dan CSS3 ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Slide to Unlock dengan Jquery dan CSS3 Sumbernya. Thank's
