Як оформити спливаючі повідомлення

Сьогодні розмова піде про пару простих стилів і ефектів для спливаючих повідомлень на вашому ресурсі. Є багато способів, щоб показати ненав'язливе сповіщення для користувача: від класичних “кричущих” повідомлень до панелі у верхній області перегляду. Насправді не існує ніяких обмежень у використанні творчих стилів та ефектів для повідомлень, але ви повинні мати на увазі, що у всьому повинна бути міра, якщо не хочете, щоб користувач впав зі стільця, коли він отримує нове повідомлення. Якщо ви збираєтесь створити максимально акуратне сповіщення, пам'ятайте про простоту і витонченість, коли вибираєте ефекти появи і зникнення.

При створенні набору стилів спливаючих повідомлень ми керувалися саме цими цілями. Ми використовували CSS анімацію, щоб показувати та приховувати сповіщення.

Деякі з них використовують фіктивне завантаження, що може бути гарною ідеєю для дій, які потребують певного часу (надсилання повідомлення і т.д.).

Зауважу, що ефекти будуть працювати тільки в браузерах, що підтримують CSS анімації і 3D-перетворення.

Є кілька аспектів в IE: Анімація “stroke-dashoffset” для шляху SVG для кругового завантаження анімації з використанням CSS анімації не працює. Також, існує проблема при гортанні анімації, яка знаходиться в нижній частині сторінки (якщо у верхній — працює). Ефект “genie (джин)” не працює, тому що IE має проблеми з перетворенням значень у відсотки.

Firefox (Win) не подобається “box shadows” для ”flipping (фліп)” ефекту, але ми залишили їх, тому що вони дуже гарно та акуратно виглядають в інших браузерах.

Ми використовували деякі ресурси, які допомогли створити ефекти:

• Деякі анімації були зроблені за допомогою bounce.js, щоб досягти ефектів “jelliness” і “bounciness”.

• Snap.svg був використаний для анімації / морфінгу форми для кутового ефекту.

• Одна з анімації SpinKit була використана для “loading (завантажувального)/spinning(обертального)” ефекту, який передує одному із стилів повідомлення.

• Адаптована Animate.css анімація була використана для ”flipping (фліп)” ефекту.

Значки, які використовуються в деяких з демо, взяті з іконок Linecons і веб-шрифт був створений з-за допомогою IcoMoon App.

А ось як ми використовуємо ефекти. Для прикладу створимо невеликий скрипт повідомлення:

// create the notification
var notification = new NotificationFx({
    // element to which the notification will be appended
    // defaults to the document.body
    wrapper : document.body,
    // the message
    message : '
This is a message
',
    // layout type: growl|attached|bar|other
    layout : 'growl',
    // effects for the specified layout:
    // for growl layout: scale|slide|genie|jelly
    // for attached layout: flip|bouncyflip
    // for other layout: boxspinner|cornerexpand|loadingcircle|thumbslider
    // ...
    effect : 'slide',
    // notice, warning, error, success
    // will add class ns-type-warning, ns-type-error or ns-type-success
    type : 'error',
    // if the user doesn´t close the notification then we remove it
    // after the following time
    ttl : 6000,
    // callbacks
    onClose : function() { return false; },
    onOpen : function() { return false; }
});
// show the notification
notification.show();

Це створює наступне розділення:

/* Growl-style layout  */
.ns-growl {
    top: 30px;
    left: 30px;
    max-width: 300px;
    border-radius: 5px;
}
.ns-growl p {
    margin: 0;
    line-height: 1.3;
}
/* For hiding the notification, we'll simply reverse the applied animation by default */
[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
    animation-direction: reverse;
}
/* Scale effect */
.ns-effect-scale {
    background: #67c58f;
    box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
}
.ns-effect-scale a {
    color: #1f8a4c;
}
.ns-effect-scale a:hover,
.ns-effect-scale a:focus {
    color: #fff;
}
.ns-effect-scale .ns-close::before,
.ns-effect-scale .ns-close::after {
    background: #1f8a4c;
}
.ns-effect-scale .ns-close:hover::before,
.ns-effect-scale .ns-close:hover::after {
    background: #fff;
}
.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
    animation-name: animScale;
    animation-duration: 0.25s;
}
@keyframes animScale {
    0% { opacity: 0; transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale3d(1,1,1); }
}

Стилі за замовчуванням для повідомлень можна знайти в NS-default.css які є включенні для кожного ефекту. Індивідуальні ефекти в окремих таблицях стилів, тобто NS-style-growl.css. Якщо ви будете використовувати лише один ефект, то застосуєте правила потрібні для стилю/ефекту.

Приклад макету і стилю ефекту:

/* Growl-style layout  */
.ns-growl {
    top: 30px;
    left: 30px;
    max-width: 300px;
    border-radius: 5px;
}
.ns-growl p {
    margin: 0;
    line-height: 1.3;
}
/* For hiding the notification, we'll simply reverse the applied animation by default */
[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
    animation-direction: reverse;
}
/* Scale effect */
.ns-effect-scale {
    background: #67c58f;
    box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
}
.ns-effect-scale a {
    color: #1f8a4c;
}
.ns-effect-scale a:hover,
.ns-effect-scale a:focus {
    color: #fff;
}
.ns-effect-scale .ns-close::before,
.ns-effect-scale .ns-close::after {
    background: #1f8a4c;
}
.ns-effect-scale .ns-close:hover::before,
.ns-effect-scale .ns-close:hover::after {
    background: #fff;
}
.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
    animation-name: animScale;
    animation-duration: 0.25s;
}
@keyframes animScale {
    0% { opacity: 0; transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale3d(1,1,1); }
}