iPhone Style, slide to unlock dengan jquery dan CSS3

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

apa bedanya dengan trik yang asli?

trik yang saya modif ini,diterapkan untuk blog sebagai welcome screen/splash screen.jadi fungsi slide'a menjadi tombol/menu pembuka/opening blog kita.

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

Pertama,begini teori'a: yang kita inginkan slide itu ada dilayar fullscreen,melayang diatas blog kita,dan kalau di unlock,slide'a hilang dan menampilkan blog kita kembali.jadi trik yang saya buat ini mirip" splash Screen atau welcome screen sebelum memasuki blog kita.kalau sudah berfungsi,tinggal tambahkan accesoriss agar tampilan'a tidak agak membosankan.misal yang ada diblog saya,saya tambahkan text messages dan gambar miku ^^

Kedua,bagaimana cara'a? :dari teori diatas,bisa saya simpulkan yaitu:

1. Bagaimana cara'a melayang?

Jawab: tambahkan Css position:fixed;

2. bagaimana cara'a slide itu ada dilayar fullscreen

Jawab: tambahkan warna background dan dibuat panjang dan lebar 100%

CSS : background:#000;(warna bg)  dan  width:100%;height:100%;

saya juga menambahkan z-index:9999 dan seterusnya,agar posisi objek ada di layer paling atas/tertinggi dari semua element dibelakangnya

3. bagaimana cara'a kalau di unlock,slide'a hilang dan menampilkan blog kita kembali?
Jawab: bagaimana cara'a? saya juga mengira itu efek dari CSS'a,tapi itu efek dari jquery'a;

$(function() {
$("h2 img").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
}
},
stop: function(event, ui) {
if (ui.position.left < 551) { $(this).animate({ left: 0 }) } } }); });

4. bagaimana cara'a menambahkan gambar dan text seperti blog johanes?
jawab :
-nah kalau yang ini,saya kreasikan sendiri~xD
-saya buat HTML sendiri dengan nama class .pesan,.pesan1,.headpesan.

.pesan saya isi dengan text ;blog johanes tidak aktif untuk sementara

.pesanhead saya isi dengan : messages from admin

.pesan1 saya isi dengan blablablablabla.panjang deh.wkwkwk

untuk gambar mikunya,cuma seperti biasa menggunakan img src,tapi luarnya saya tambahkan html dengan class name .gambarmiku. kenapa saya tambahkan? agar gambar'a bisa diatur letak dan posisinya.

5. bagaimana cara mengatur posisinya?
jawab:
menggunakan margin.

6. bagaimana cara menggunakan margin?
tambahkan saja margin-left ,margin right,margin-top dan margin bottom.
tinggal atur posisi'a/nila px.
misal:
mau geser kekanan : margin-left:10px;
mau geser keatas :margin-bottom:10px;

(tinggal atur nilai'a berapa jauh mau kamu geser objeknya.)

7. kenapa margin left bisa kekanan?
jawab:maksud dari margin left itu,memberi jarak dari sebelah kiri,maka objeknya akan kegeser kearah kanan,dan juga sebaliknya.tapi bila nilai'a kamu beri nilai minus,maka objek'a akan bergeser ke arah kiri.


8. kenapa bisa?
jawab: sebelum'a saya tanya dahulu,pernah belajar matematika tidak? xDD

Sebenarnya prinsipnya sama seperti gambar diatas.
begini teori'a,misal ada obkek sebuah bola.saat posisi margin 0,pasti kalau digambar posisinya ditengah bukan?
lalu misal kita tambahkan margin-left:5px;
jadi seperti gambar dibawah ini

maksudnya margin-left itu,posisi vertikal geser dari kiri-kekanan.tetapi kalau horizontal .margin-top dari posisi atas kebawah.(minus dan plus jadi terbalik/jadi kebalikanya).kecuali bila diberi nilai minus,maka hasil'a margin left bergeser ke kiri dan sebaliknya.

ax² + bx + c = 0  ax² + bx + c = 0  a (x + p/a) (x + p/a) = 0
 x1 = - p/a dan x2 = - q/a

itulah teori singkat tentang margin.
loh,kq jadi out off topic?=___="
wah,sepertinya saya kebanyakan belajar kalkulus~xDD



9. bagaimana mengedit style pada text " Slide to unlock " ?

kamu cukup perhatikan CSS yang saya tandai dibawah ini.

#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;
}

warna ██ : warna text:ganti kode warna hexadesimal'a.karena text efek'a menggunakan color gradient

kode #8B836F adalah warna ██ dan kode #52CFD2 adalah warna ██
jadi kalau digambarkan menjadi seperti ini

dan karena menggunakan efek animasi css 3,maka akan bergerak secara halus dari kiri kekanan.




warna ██ : Untuk mengatur nilai rounder/bulat pada objek tersebut.

warna ██ : untuk mengatur tebal,tipe,dan warna border.

warna ██ : untuk mengatur ukuran text.

warna ██ : tipe font.

warna ██ : jarak dari atas objek ke atas sejauh 130px. (bisa dirubah nilai'a,tinggal sesuaikan~

10. dan terakhir,bagaimana agar trik ini hanya berfungsi di home page saja?
jawab: kita tinggal menambahkan html tag conditional atau bisa lihat lebih lengkap'a disini untuk penerapanya.

sipp,kembali ke slidenya~xD


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/AVvXsEh1CXoir-bjkYIdqOWx3nAx3W0jJLgr4Rh_7p3Nr5baTgPoYwzrEeqK-GDvMLrGQna9WfghdgX9APSZVMpYiLpozXTz2dgqnUvSW6LfdRYkSnnvSDyy6LgtB6U539sWF2hfTey03Sq1wvQ/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
yosh,saya off lagi,sampai jumpa di waktu liburan ~xD
sankyu all~ *OFF

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

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: