Apa kabar sobat~ akhirnya ada sedikit kesempatan juga untuk posting blog,karena kebetulan hari ini libur 2 hari~xD
Trik kali ini saya dapatkan dari CSS triks.com dengan tidak sengaja.awalnya cuma iseng' browsing trik CSS,lalu saya menemukan trik yang cukup menarik,yaitu Slide to unlock.trik ini sebenar'a udah lama juga,tapi karena saya lihat masih jarang",saya post deh~
contoh pada css-tricks.com
contoh trik modifikasi saya
Tujuan dari Trik yang berupa CSS3 dan jquery ini , kalau menurut saya yang buat juga hanya iseng" agar mirip dengan sistem Unlock di Iphone.Setelah saya coba demo'a.wah ternyata lucu juga ya,ketika kita drag pointer ke kanan,maka automatis kebuka/ilang slide'a?
setelah saya periksa CSS'a ternyata Css'a menggunaka CSS keyframe yang tidak looping.teori'a sebelum kita geser slide,display masih keadaan "Block",setelah kita drag ke kanan sejauh 720px,posisi display menjadi "none".wah menarik juga nih.
lalu saya cari ide bagaimana cara menerapkan slide to unlock ini untuk fungsi lain.
saya iseng" otak atik,dan akhirnya berguna juga untuk unlock screen yang ada di blog kita *.*
bagaimana cara'a? yahh,karena ini kesempatan yang langka juga untuk saya posting,saya ceritaiin deh~xD
kalo kalian mau liat contoh nya bisa diliat yang saya punya disini
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/AVvXsEhAahrYm4hDHhYbWNk6Pg_moMUJ1YwI3HbGw53zrCC5jp7aALZXNPhqw-TkzAG473PgnDxbN52Y0rmmx9M-cIqcuwfFJmy7EmNqikqxZq-BvodcDxBhaYn7gugGTDiMV2d6zmxD-3slJbA/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
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
yosh,saya off lagi,sampai jumpa di waktu liburan ~xD
sankyu all~ *OFF
contoh diatas,agak berbeda dengan yang aslinya di
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
yosh,saya off lagi,sampai jumpa di waktu liburan ~xD
sankyu all~ *OFF
Tidak ada komentar:
Posting Komentar