Memberi Screensaver pada Halaman Web
Posted by Gora Santika
Sumber Gambar : www.mutterz.com
Hoaahm... Pagi-pagi udah ujan gerimis. Daripada suwung, mending bikin posting aja. Kali ini kita akan kembali memanfaatkan beberapa function yang dimiliki JQuery, yaitu hide() dan slideDown().
Bagi anda-anda yang suka bermain dengan komputer, pasti udah gak asing sama istilah Screensaver. Screensaver adalah bentuk tampilan yang muncul ketika komputer tidak mendapat aktivitas dari user dalam waktu tertentu. Screensaver ditujukan untuk memperpanjang usia monitor. Di sini saya gak akan bahas tentang fungsi screensaver. Di sini saya akan menuliskan cara membuat screensaver pada sebuah halaman web.
Berhubung kita menggunakan fungsi JQuery, maka beberapa hal dibutuhkan antara lain:
- JQuery libraries yang dapat di unduh » di sini «
- Browser dengan Javascript enabled
- Sebuah halaman html
Saatnya beraksi...
Pertama-tama kita membutuhkan persiapan awal, yaitu menata posisi screensaver yang akan tampil nantinya. Berikut saya sertakan contoh kodenya:
<html>
<head>
<title>Screen Saver</title>
<style>
#all {
top:0;
right:0;
bottom:0;
left:0;
position:absolute;
z-index:1;
}
#screen {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1000;
background:#000000;
color:#FFFFFF;
padding-top:100px;
text-align:center;
}
</style>
</head>
<body onLoad="delay()">
<!-- SCREEN SAVER AREA -->
<div id="all" onmousemove="delay()" onmousedown="delay()" >
<div id="screen">
<h2>Mode Hemat Energi</h2>
Gerakkan Cursor Anda Untuk Melanjutkan
</div>
<!-- SCREEN SAVER END -->
<!-- CONTENT AREA -->
//////////////////////////////////////////////////
//ANDA DAPAT MENULISKAN CONTENT WEB ANDA DI SINI//
//////////////////////////////////////////////////
<!-- CONTENT AREA -->
</div>
</body>
</html>
Secara singkat, di atas adalah sebuah halaman html dengan 2 buah <div> di dalamnya. div#all adalah div yang mencakup semua isi halaman karena berada satu tingkat di bawah tag <body>. Semua element isi dari halaman diharap ditulis dalam div ini agar fungsi javascriipt dapat berjalan dengan baik. Kemudian div#screen merupakan tempat untuk meletakkan element yang hendak ditampilkan pada screensaver.
Kemudian untuk DOM Event yang ada, pada tag <body> diletakkan event onLoad yang berarti ketika halaman di-load, akan menjalankan fungsi tertentu. Pada kasus ini adalah fungsi delay(). Kemudian Event pada div#all adalah semua yang dapat memicu hilangnya screensaver seperti mouse bergerak, mouse di-klik, dsb.
Setelah semua persiapan selesai, saatnya bermain dengan javascript. Berhubung kita hendak menggunakan JQuery, pertama compile dulu library yang telah anda download. (letakkaan di dalam tag <head></head>)
<script src="nama_file"></script>Ganti nama_file sesuai dengan lokasi JQuery libraries yang anda unduh, misalkan "jquery-1.6.4.js"
Saatnya menulis javascript. Tulis script berikut pada bagian paling bawah halaman sebelum </body>
<script>
// SEMBUNYIKAN SCREEN SAVER
$("#screen").hide();
// FUNGSI MENAMPILKAN SCREEN SAVER
function delay() {
// ATUR WAKTU KELUAR DALAM MENIT
var time = 3;
var secs = time*1000;
var mins = secs*60;
$("#screen").hide();
$("#screen").delay(mins).slideDown("slow");
}
</script>
Variable time di atas saya set dengan angka 3. Menandakan screensaver akan muncul ketika tidak ada aktivitas pada halaman web anda selama 3 menit.
Pada project kali ini, kita menggunakan fungsi JQuery hide() dan slideDown() serta beberapa javascript. Secara sederhana, sistim kerja dai screensaver ini adalah:
- Pertama, kita mempersiapkan lahan bagi screensaver.
- Kemudian kita memberikan script yang akan menyembunyikan screensaver ketika halaman di-load.
- Ketika tidak ada aktivitas pada halaman selama waktu tertentu, screensaver akan muncul.
- Saat mouse digerakkan, screensaver hilang dan kembali ke point ke-3.
Hasil dari percobaan di atas adalah: » seperti ini «
*Waktu saya set 0.1 menit / 6 detik
[Semoga Bermanfaat]
