Сьогодні розмова піде про пару простих стилів і ефектів для спливаючих повідомлень. Є багато способів, щоб показати ненав'язливе сповіщення для користувача: від класичних "кричущих" повідомлень до панелі у верхній області перегляду. Насправді, не існує ніяких обмежень у використанні творчих стилів та ефектів для повідомлень, але ви повинні мати на увазі, що у всьому повна бути міра, якщо не хочете, щоб користувач впав зі стільця, коли він отримує нове повідомлення. Якщо ви збираєтесь створити максимально акуратне сповіщення, пам'ятайте про простоту і витонченість, коли вибираєте ефекти появи і зникнення.
При створенні набору стилів спливаючих повідомлень ми керувалися саме цими цілями. Ми використовували 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.
А ось як ми використовуємо ефекти. Для прикладу створимо невеликий скрипт повідомлення:
var notification = new NotificationFx({
wrapper : document.body,
message : '
Message
',
layout : 'growl',
effect : 'slide',
type : 'error',
ttl : 6000,
onClose : function() { return false; },
onOpen : function() { return false; }
});
notification.show();
Це створює наступне розділення:
.ns-growl {
top: 30px;
left: 30px;
max-width: 300px;
border-radius: 5px;
}
.ns-growl p {
margin: 0;
line-height: 1.3;
}
[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
animation-direction: reverse;
}
.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. Якщо ви будете використовувати лише один ефект, то застосуєте правила потрібні для стилю/ефекту.
Приклад макету і стилю ефекту:
.ns-growl {
top: 30px;
left: 30px;
max-width: 300px;
border-radius: 5px;
}
.ns-growl p {
margin: 0;
line-height: 1.3;
}
[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
animation-direction: reverse;
}
.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); }
}
Ще немає коментарів