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

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

При створенні набору стилів спливаючих повідомлень ми керувалися саме цими цілями. Ми використовували 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); }
    }