Membuat animasi “Slide to unlock” seperi pada iPhone dengan bantuan jQuery
Demontrasi
Pada tema sebelumnya, ariona.net menyertakan Slider untuk merubah bahasa. Yang tadinya secara default bahasa Inggris, anda tinggal menslide (menggeser) slider ke bendera Indonesia, bahasa situspun berubah menjadi bahasa Indonesia, begitu juga sebaliknya.
Ide awal pembuatan Widget (saya sebut saja widget) tersebut berawal dari Lock screen pada iPhone. jika Screen iPhone dalam keadaan terkunci, kita harus menslide untuk membukanya. sebuah konsep Lock screen yang menyenangkan untuk smartphone dengan fitur touchscreen.
Namun, kali ini saya akan menerapkannya pada widget perubah bahasa. widget ini dibuat dengan jQuery dan sedikit polesan CSS :).
HTML
pertama-tama kita buat terlebih dahulu markup HTMLnya sebagai berikut :
<div id="container"> <div id="unlock-slider-wrapper"> <div id="unlock-slider"> <div id="unlock-handle" style="left: 0px; "></div> </div> </div> </div>
<div id="container"> akan kita gunakan untuk memberikan background terhadap widget dan menentukan ukuran Widget yang akan kita buat
<div id="unlock-slider-wrapper"> digunakan untuk wrapper slider kita akan tambahkan background bendera disini
<div id="unlock-slider"> kita akan mendefinisikan tempat untuk area slider yang akan dibuat, bisa dibilang jalannya. dan
<div id="unlock-handle"> adalah handle untuk menslidenya (tombol panah untuk menslide).
CSS
Saatnya mendandani Markup yang telah kita buat, sebelumnya anda dapat mendownload beberaa resource berikut ini. 🙂 background Background Flag handle
#container{
background-image:url("backgroud.jpg");
width:420px;
height:80px;
margin:0 auto;
}
#unlock-slider-wrapper{
background-image:url("flag.jpg");
padding:19px 18px;
}
#unlock-slider{
width:390px;
height:42px;
position:relative;
}
#unlock-handle{
background-image:url("handle.png");
position: absolute;
z-index: 10;
height: 44px;
width: 68px;
top: 0px;
left: 0px;
}
.id{
display:none;
}
Yep, Selesai menyiapkan UI nya, kita lanjut ke fungsional dari apa yang akan kita buat!
Jquery
Kita akan menggunakan Library JQuery, JQuery UI dan JQuery Core. ketiganya dibutuhkan untuk fungsionalitas dari slider yang akan kita buat. jadi tambahkan baris kode berikut di bagian <head> anda.
<script type="text/javascript" src="http://dl.dropbox.com/u/26808427/cdn/ariona/script/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/u/26808427/cdn/ariona/script/ui.core-1.5.3.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/u/26808427/cdn/ariona/script/ui.slider.js"></script>
Script di download langsung dari filesharing Dropbox saya :).
selanjutnya adalah penambahan kodenya.
$(document).ready(function(){
$("#unlock-slider").slider({
handle: "#unlock-handle",
animate:true,
stop: function(e,ui){
if($("#unlock-handle").position().left == 322){
$(".id").show();
$(".en").hide();
} else {
$("#unlock-handle").animate({left: 0}, 200 );
$(".id").hide();
$(".en").show();
}
}
});
});
huuft.. pusing? tenang saya jelaskan satu persatu :).
Kode baris ke 1
pertama-tama kita akan cek apakah dokumen html telah siap dalam arti lain telah di load semuanya. jadi kita masukka fungsi-fungsi yang akan kita buat disini 🙂
Baris ke 2-5
adalah fungsi dari slider yang akan dibuat, fungsi ini berasal dari jQuery ui.slider.
pertama, kita definisikan jalur slider (dengan jQuery selector $(‘#unlock-slider’)) dan menambahkan event slider, dengan value sebagai berikut :
handle : untuk mendefinisikan handle dari slider (yang akan kita drag).
animate : untuk menambahkan animasi, ketika kita melepas dragging.
stop : kondisi ketika handle berhenti di drag.
Baris ke 2-10
Merupakan kondisi ketika stop terjadi. kita kondisikan jika handle berhenti di 322 pixel, maka kita akan menampilkan tag dengan class id dan menyembunyikan tag dengan class .en, dan jika handle tidak mencapai posisi 322px, maka kita akan mengembalikan slider ke semula titik 0px. 🙂
Pengujian
Oke, untuk mengujinya kita perlu tagyang akan tampil dan hilang, yaitu tag dengan class id dan en. jadi tambahkan tag dengan class tersebut, contohnya.
<p class="id"">Yep, paragraf ini berbahasa Indonesia, Untuk merubahnya menjadi bahasa Inggris silahkan Slide ke bendera Inggris 🙂 </p> <p class="en">Hello, This demo will show you how to create iPhone like slider, to change some element. try to slide it to Indonesian Flag, and see what's going on.</p>
Sumber Referensi
CSS-tricks (iPhone
10 Komentar untuk “Membuat “Slide to Unlock” dengan Jquery”
Tinggalkan Komentar Anda
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Boleh dicoba…
Thanks..
sama-sama, selamat mencoba:)
boleh dicoba
Cara untuk menerapkannya pada wordpress gemana ya?
Dulu saya makenya manual, jadi pas buat post itu udah dua bahasa, yang indo dikasih div class ind yang english dikasih class eng.
Yang harus dibawa ke “Edit HTML” itu yang mana? CSS, Markup HTML itu dicopy kemana ya?
manurut kamu? 🙂
Mau nanya kode ini
$(document).ready(function(){
$(“#unlock-slider”).slider({
handle: “#unlock-handle”,
animate:true,
stop: function(e,ui){
if($(“#unlock-handle”).position().left == 322){
$(“.id”).show();
$(“.en”).hide();
} else {
$(“#unlock-handle”).animate({left: 0}, 200 );
$(“.id”).hide();
$(“.en”).show();
}
}
});
});
ditaruh dimana, udah bolak-balik utak-atik ga bisa juga :'(
mas source gambar nya tidak ada hehe