Full screen banner adalah elemen desain yang sangat berguna dalam berbagai situasi. Banner ini dapat dikustomisasi warnanya, termasuk penggunaan warna transparan, sehingga memungkinkan fleksibilitas tinggi dalam penerapannya. Kegunaan utamanya adalah untuk menampilkan konten tertentu tanpa memungkinkan pengguna mengakses konten di baliknya. Artikel ini akan membahas cara membuat full screen banner yang menutupi seluruh layar serta beberapa contoh penggunaan praktisnya.
Keuntungan Menggunakan Full Screen Banner
Full screen banner bisa menjadi alat yang efektif untuk menyampaikan pesan penting atau memberikan informasi kepada pengunjung situs tanpa mengizinkan mereka untuk mengakses konten lain. Ini sangat berguna dalam situasi seperti:
- Pengumuman Penting: Banner dapat digunakan untuk menampilkan pengumuman penting yang harus dilihat oleh semua pengunjung sebelum mereka melanjutkan ke bagian lain dari situs.
- Maintenance Mode: Jika situs sedang dalam perbaikan atau pembaruan, banner bisa digunakan untuk memberi tahu pengunjung tentang status tersebut.
- Pemberitahuan Kebijakan: Dapat digunakan untuk menampilkan perubahan kebijakan atau peraturan situs yang harus diketahui pengunjung.
Script dan Tampilan
Script HTML
Berikut ini adalah script banner yang bisa Anda implementasikan ke dalam situs Anda. Script ini berjenis HTML.
<!DOCTYPE html>
<html>
<head>
<style>
.full-screen-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
}
.full-screen-banner h1 {
margin-bottom: 10px;
}
.full-screen-banner .powered-by {
font-size: 16px;
}
</style>
</head>
<body>
<div class="full-screen-banner">
<h1>Mohon tunggu...</h1>
<div class="powered-by">Powered by: Skripsi Express</div>
</div>
<!-- Konten halaman Anda di sini -->
</body>
</html>
Wujud Tampilan
Berikut adalah wujud banner ketika di implementasikan ke situs. Banner ini memiliki tanda X sebagai ikon penutup.
Fungsionalitas Banner Full Screen
Full screen banner adalah elemen desain yang sangat berguna untuk menampilkan informasi penting atau menghalangi akses ke konten tertentu. Berikut adalah beberapa fungsionalitas yang dapat ditambahkan ke banner tersebut untuk meningkatkan pengalaman pengguna:
1. Tombol Tutup (Close Button)
Fungsi tombol tutup adalah memberikan opsi kepada pengguna untuk menutup banner dan mengakses konten di baliknya jika diperlukan. Tombol ini biasanya ditempatkan di sudut kanan atas banner. Ketika tombol ditekan, banner akan menghilang dari tampilan layar, memberikan pengguna fleksibilitas untuk melanjutkan interaksi dengan situs.
2. Timer Otomatis
Banner dapat diatur untuk muncul selama jangka waktu tertentu dan kemudian menghilang secara otomatis. Misalnya, banner bisa ditampilkan selama 5 detik. Timer ini sangat berguna untuk pengumuman sementara atau pesan yang hanya perlu ditampilkan dalam durasi singkat tanpa memerlukan tindakan dari pengguna.
3. Responsif dan Adaptif
Full screen banner harus responsif dan adaptif, artinya dapat menyesuaikan ukurannya sesuai dengan berbagai ukuran layar dan perangkat, seperti desktop, tablet, dan ponsel. Desain yang responsif memastikan bahwa banner tetap terlihat baik dan berfungsi dengan benar di semua perangkat, memberikan pengalaman pengguna yang konsisten.
Kustomisasi Warna dan Transparansi
Salah satu fitur utama dari full screen banner adalah kemampuannya untuk dikustomisasi. Anda dapat mengubah warna latar belakang banner sesuai kebutuhan, termasuk menggunakan warna transparan. Warna transparan dapat memberikan efek yang halus dan tidak mengganggu keseluruhan estetika situs web. Hal ini memungkinkan banner untuk tetap menonjol tanpa sepenuhnya menutupi konten di belakangnya.
Contoh Penggunaan: Situs Forum yang Sudah Tidak Aktif
Sebagai contoh konkret, bayangkan Anda memiliki sebuah forum yang pernah sangat aktif tetapi sekarang sudah tidak digunakan lagi. Anda ingin menunjukkan banyaknya jumlah interaksi yang terjadi di masa lalu untuk memperkuat brand Anda, namun, Anda juga ingin menghalangi akses ke konten yang sudah usang.
Dalam kasus ini, Anda dapat memasang full screen banner dengan latar belakang transparan. Banner ini bisa menampilkan pesan yang menyatakan bahwa forum sudah tidak aktif, namun tetap menampilkan statistik interaksi yang tinggi sebagai bukti kesuksesan dan popularitas forum tersebut di masa lalu. Dengan demikian, Anda dapat meningkatkan kepercayaan pengunjung baru dan lama terhadap brand Anda.
Pesan dalam banner bisa berbunyi seperti: “Meskipun forum ini tidak lagi aktif, kami bangga dengan 1 juta lebih diskusi yang terjadi di sini. Terima kasih atas partisipasi Anda!”
Implementasi
Untuk mengimplementasikan full screen banner, Anda tidak memerlukan banyak kode. Cukup dengan beberapa baris CSS dan HTML, banner yang menutupi seluruh layar dapat dibuat dengan mudah. Pastikan untuk menyesuaikan warna dan transparansi sesuai dengan kebutuhan dan gaya desain situs Anda.
Kesimpulan
Full screen banner adalah alat yang sangat fleksibel dan bermanfaat untuk menampilkan konten penting sambil menghalangi akses ke bagian lain dari situs web. Dengan kustomisasi warna, termasuk transparansi, banner ini dapat disesuaikan untuk berbagai tujuan. Baik untuk pengumuman, pemberitahuan maintenance, atau menampilkan sejarah kesuksesan sebuah situs, full screen banner memberikan solusi efektif yang meningkatkan komunikasi dengan pengunjung.
Jangan ragu untuk menyesuaikan desain banner sesuai dengan kebutuhan spesifik situs Anda untuk mendapatkan hasil terbaik.
