Сегодня мы бы хотели поделиться с вами несколькими простыми примерами стильных и эффектных уведомлений для вашего сайта. Есть множество способов показа ненавязчивых сообщений пользователям: от классических growl-like до уведомлений в строке состояния браузера. Тут действительно нет предела для творческих идей, но вы должны понимать, что тут важно не переусердствовать, если вы конечно не хотите, чтобы ваши пользователи падали со стульев, когда они получают эти самые уведомления.

В данных примерах мы используем CSS анимации для отображения и скрытия уведомлений. Некоторые из них имеют своеобразный таймер/прогресс, перед тем как появиться, это может быть удобно для конкретных действий, которые требуют определённого времени отклика системы, например отправка сообщения, и т.д.

Обратите внимание, что эффекты будут работать только в браузерах поддерживающих CSS анимации и 3D-преобразования. Это все актуальные версии браузеров.

Есть несколько проблем с IE: Анимация stroke-dashoffset, та, что для круговой SVGзагрузки использует CSS анимации, которые не работают в IE. Там также какие-то проблемы с перестраиваемой анимацией, которая находится в нижней части страницы (если они сверху, то вроде работает). Эффект Genie не работает в IE, потому что у него проблемы с переводом процентных значений.

Firefox (Win), похоже, не нравится box shadow при переключении, но, тем не менее, мы оставили его для bouncy flip эффекта, потому что это выглядит аккуратно во всех других браузерах.

Мы воспользовались несколькими отличными ресурсами, которые помогли создать эффекты:

• Некоторые анимации были сделаны с помощью bounce.js для jelliness и bounciness в некоторых эффектах.

• Snap.svg был использован для анимации / морфинга форм углового эффекта.

• Одна из анимаций использует SpinKit для загрузки / формования эффекта, которому предшествует один из стилей уведомлений.

• Адаптированный Animate.css был использован для bouncy flip эффекта.

Иконки, которые вы можете заметить в некоторых примерах взяты с набора 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 : '<p>This is a message</p>',
 
    // 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();

Это создаёт следующее разделение:

<div class="ns-box ns-growl ns-effect-slide ns-type-notice ns-show">
    <div class="ns-box-inner">
        <p>This is a message</p>
    </div>
    <span class="ns-close"></span>
</div>    

Основные стили для уведомлений можно найти в 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); }
}

Надеемся вам понравились эти маленькие идеи, и вы найдёте их вдохновляющими!

Перевод: Art

Оригинал: tympanus.net

Демо тут, исходники тут.

Github