Hai Sobat Sandio! Malam ini kita akan kembali memanfaatkan beberapa fungsi yang dimiliki JQuery, yaitu hide() dan slideDown().

Bagi Sobat yang senang bermain dengan komputer, pasti sudah tidak asing dengan istilah Screensaver. Screensaver adalah bentuk tampilan yang muncul ketika komputer tidak mendapat aktivitas dari pengguna dalam kurun waktu tertentu. Screensaver ditujukan untuk memperpanjang usia monitor. Fungsi dan manfaat dari screensaver tidak akan kami bahas secara mendetail. Selanjutnya langsung kami jelaskan bagaimana cara membuat screensaver pada 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 kami 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 Sobat Untuk Melanjutkan
</div>
<!-- SCREEN SAVER END -->

<!-- CONTENT AREA -->
///////////////////////////////////////////////
// SOBAT DAPAT MENULISKAN KONTEN WEB DI SINI //
///////////////////////////////////////////////
<!-- CONTENT AREA -->
</div>

</body>
</html>

Secara singkat, skrip 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 javascript 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 muat, 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 sertakan dulu library yang telah Sobat unduh. (letakkaan di dalam tag <head></head>)

<script src="nama_file"></script>
Ganti nama_file sesuai dengan lokasi JQuery libraries yang Sobat unduh, misalkan “jquery-1.6.4.js”

Saatnya menulis javascript. Tulis skrip 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 kami set dengan angka 3. Menandakan screensaver akan muncul ketika tidak ada aktivitas pada halaman web Sobat 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 diset sebesar 0.1 menit / 6 detik



[Semoga Bermanfaat]

Artikel ini telah mengalami penyesuaian dari versi terdahulu yang dipublikasikan pada blog Belajar Web dengan judul Memberi Screensaver pada Halaman Web.

Screensaver pada Halaman Web
Tagged on:                         

Leave a Reply

Your email address will not be published. Required fields are marked *