membuat Teknik Overlay WEB

Overlay.. kok batak bilang kasih lae.. kirim  lae.. hahahah :D

okelah langsung aja kini beritaserge mau bebagi tip tentang desain web, terutama dasarnya dulu ya, yaitu dengan bantuan CSs,, oke begini caranya :

Markup HTML

Buatlah sebuah nasi goreng dengan kopi black, hahah :D, maksudnya kata2 ini "div untuk overlay, dan

tempatkan pula konten yang ingin anda tampilkan dalam overlay seperti berikut: :D

Teknik Dasar Membuat Overlay
Serdang bedagai new's "Beritaserge.blogspot.com"  . Klik tombol close di kanan atas

Satu div dengan class overlay, div ini berfungsi sebagai penutup seluruh konten dan sebuah div dengan class box-overlay yang akan menjadi konten yang ditampilkan ketika overlay aktif.

CSS

lalu , seperti yang telah saya sebutkan di atas, ada kopinya ya... kita akan merubah div overlay agar menutupi seluruh konten utama situs.

.overlay{
 width:100%;
 height:100%;
 position:fixed;
 background:rgba(0,0,0,.7);
 z-index:9999;
 top:0;
 left:0;
}

width:100%;height:100% pasti sudah tahu kan fungsinya. position:fixed membuat overlay tetap berada pada posisinya meskipun kita melakukan scrolling. background:rgba(0,0,0,.7); kita tambahkan background dengan teknik rgba agar kita memiliki nilai transparansi (alpha) sebesar 70%. dan terakhir adalah z-index:9999 yang berfungsi menempatkan overlay ini di atas seluruh elemen yang ada, saya gunakan nilai 9999 karena sebagian plugin javascript (jquery) terkadang memiliki nilai sebesar itu.

Tugas Selanjutnya adalah memosisikan overlay-box supaya berada di tengah.

.box-overlay{
 width:400px;
 height:150px;
 background:white;
 border-radius:10px;
 margin:20% auto;
 position:relative;
 padding:10px;
 box-shadow:0 0 0 5px rgba(0,0,0,.4);
 text-align: center;
}

Tak ada yang aneh bukan dengan style di atas? hanyalah style-style dasar yang digunakan. position:relative; saya tambahkan karena tombol close akan memiliki position:absolute.

Terakhir kita beri style untuk tombol closenya.

.close-button{
 width: 20px;
 height: 20px;
 background: black;
 border-radius: 50%;
 border: 3px solid white;
 box-shadow: 0 0 5px rgba(0, 0, 0, .7);
 display: block;
 color: white;
 text-align: center;
 text-decoration:none;
 position:absolute;
 top:-10px;
 right:-10px;
}

Dari gaya atau style di atas, anda juga dapat memahami penggunaan position relative dan absolute, dalam kasus ini saya terapkan untuk menempatkan posisi tombol close berada di kanan atas dan sedikit keluar dari box overlay. Pemberian border-radius:50% membuat link menjadi bulat. Agar kita dapat mengatur width dan height dari link maka saya tambahkan pula display:block.

Javascript

Langkah terakhir adalah penambahan javascript, kita telah menambahkan tombol close namun tombol tersebut tidak dapat berfungsi sebagaimana mestinya karena HTML dan CSS tidak mempunyai kemampuan untuk hal tersebut. Dengan bantuan javascriptlah kita dapat memecahkan masalah tersebut.

Saya akan menggunakan library jQuery, jadi pastikan anda telah mendownload dan menyertakan scriptnya seperti berikut :

Selanjutnya sederhana saja, ketika tombol close diklik, kita akan menyembunyikan overlaynya.

Masih bingung dengan maksud dari kode di atas, mari saya jelaskan sedikit :

$(document).ready(function(){ ...}); memastikan bahwa script di dalamnya akan dijalankan hanya jika halaman web telah siap (berhasil diload seluruhnya). Selanjutnya saya berikan event listener click pada .close-button dengan $(".close-button").click(function(e){ ... });, Jadi script yang ada di dalamnya akan dijalankan hanya jika .close-button diklik, simpel bukan?.

Karena perilaku dasar dari link ketika diklik adalah membuka halaman web yang terdapat dalam atribut href, maka pertama-tama saya nonaktifkan perilaku tersebut dengan e.preventDefault();. Sebenarnya script ini tidak diperlukan jika tombol yang kita buat menggunakan div. namun karena kita menggunakan link (anchor), maka script ini diperlukan .

Terakhir adalah aksi yang akan dilakukan ketika tombol close di klik. Ketika diklik maka saya sembunyikan div overlay dengan efek fadeout : $("overlay").fadeOut();

Lalu bagaimana jika kita ingin menampilkan overlay, ketika suatu link atau div diklik seperti yang saya lakukan pada tombol di atas (awal artikel)? Sederhana saja, tekniknya sama dengan close-button, namun anda perlu mengganti fadeOut menjadi fadeIn.

Kesimpulan

Sesuai dengan judul, saya hanya menjelaskan teknik dasar untuk membuat overlay. Anda dapat mengembangkan fungsionalitas dari overlay tersebut sesuai dengan kebutuhan dan kemampuan anda dalam javascript. Karena kita tahu untuk menambahkan fungsionalitas dari overlay hanya bisa dilakukan dengan javascript .