Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini akan mempengaruhi User Xperience pengunjung saat berada pada halaman konten.
Pada Tutorial kali ini, Kita akan belajar bagaimana untuk membuat beberapa pesan notifikasi dengan CSS3 dan jQuery.
Jenis pesan
Di bawah ini adalah daftar dengan notifikasi pesan umum:
• Info
• Error (kesalahan)
• Warning (peringatan)
• Success (berhasil)
Info
Tujuannya adalah untuk menginformasikan pengguna mengenai masalah yang relevan
Berikut source codenya :
HTML
<div class="info message"> <h3>FYI, something just happened!</h3> <p>This is just an info notification message.</p> </div>
CSS
.message{
background-size: 40px 40px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
}
.info{
background-color: #4ea5cd;
border-color: #3b8eb5;
}
Error (kesalahan)
Ketika operasi gagal, pengguna akan diberitahu. Misalnya: " The account couldn't be deleted." atau " Your settings weren't saved " dan lain lain
HTML
<div class="error message"> <h3>Ups, an error ocurred</h3> <p>This is just an error notification message.</p> </div>
CSS
.message{
background-size: 40px 40px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
}
.error{
background-color: #de4343;
border-color: #c43d3d;
}
Warning (peringatan)
Jenis pesan ini memberitahu pengunjung dari kondisi yang dapat menyebabkan masalah dikedepannya.
HTML
<div class="warning message"> <h3>Wait, I must warn you!</h3> <p>This is just a warning notification message.</p> </div>
CSS
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
}
.warning{
background-color: #eaaf51;
border-color: #d99a36;
}
Success (berhasil)
Pesan SUCCESS akan ditampilkan setelah pengunjung berhasil melakukan tindakan
HTML
<div class=SUCCESS message"> <h3>Congrats, you did it!</h3> <p>This is just a success notification message.</p> </div>
CSS
.message{
background-size: 40px 40px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
}
SUCCESS {
background-color: #61b832;
border-color: #55a12c;
}
.message h3{
margin: 0 0 5px 0;
}
.message p{
margin: 0;
}
@keyframes animate-bg {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
Perhatikan animated-bg, yang menganimasikan garis-garis diagonalbackground. Untuk melihat efek ini, kita harus menggunakan browser WebKit terbaru seperti Chrome / Safari atau Mozilla 5 +.
Pesan notifikasi akan disembunyikan awalnya. Untuk itu kita akan menggunakan posisi tetap (nilai absolut hanya untuk IE6 - karena tidak ada posisi: dukungan tetap).
position: fixed;
_position: absolute; /* IE6 only */
jQuery
Tentukan pesan jenis menggunakan sebuah array:
var myMessages = ['info','warning','error','SUCCESS' ];
Fungsi di bawah ini menyembunyikan pesan pemberitahuan. Pesan bisa memiliki ketinggian dinamis dan untuk itu, tinggi setiap pesan yang dihitung untuk menyembunyikannya dengan baik.
function hideAllMessages() {
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++) {
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
Fungsi ShowMessage dipanggil saat dokumen siap.
function showMessage(type) {
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
});
}
Saat memuat halaman, pertama-tama kita akan menyembunyikan semua pesan: hideAllMessages(). Kemudian, untuk setiap trigger, akan menampilkan pesan setara:
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++)
{
showMessage(myMessages[i]);
}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});
Itulah tadi bermacam-macam notifikasi yang dapat kita pakai ke website, silahkan dicoba untuk mendapatkan user xperience yang lebih untuk pengunjung website anda.
