Сегодня мы хотим поделиться с вами несколькими простыми примерами стилей и эффектов для оповещений на вашем веб-сайте. Существует множество методов отобразить ненавязчивое сообщение пользователям: от классического полу-заметного оповещения до панели вверху окна просмотра. Здесь на самом деле не существует ограничений в том, насколько эффективными и стильными вы можете их сделать, однако следует помнить о том, что здесь лучше не злоупотреблять, ведь пользователь может и опрокинуться на стуле, если резко вылетит что-нибудь страшное. Если вы хотите просто оповестить пользователей о чем-либо, то вам следует придерживаться простоты и минимализма.В данном небольшом наборе стилей оповещения мы хотели показать вам, как это можно сделать. Мы используем CSS-анимации для отображения и скрывания оповещений. Некоторые из них используются перед имитацией загрузки, и это очень удобно, если вашему сайту требуется время на подгрузку каких-либо элементов.Учтите, что эффекты будут работать только в тех браузерах, где имеется соответствующая поддержка CSS-анимаций и 3D-трансформаций.Стоит помнить о наличии некоторых проблем с IE: вы не сможете использовать CSS-анимацию stroke-dashoffset для SVG-пути, так как она не будет работать в IE. Также могут возникнуть проблемы с переворачивающейся анимацией, которая представлена в самом низу страницы (однако в верхней части страницы она будет работать). Эффект genie не будет работать, так как IE не очень хорошо справляется с изменением значений, указанных в процентах.Firefox (Win), в свою очередь, не очень хорошо работает с тенями блоков при переворачивании вещей, но мы все равно сохранили этот эффект переворачивания, так как во всех остальных браузерах с этим проблем нет.
В создании этих эффектов нам помогли следующие ресурсы:
* некоторые анимации были созданы при помощи bounce.js.
* snap.svg использовался для анимации фигуры для создания углового эффекта.
* Одна из анимаций SpinKit была использована для эффекта загрузки/вращения, который предшествует одному из стилей оповещений.
* Адаптированная анимация animate.css была использована для резкого эффекта переворота.
Иконки, использованные в некоторых демо, были позаимствованы из набора иконок Lineicons, а веб-шрифт был разработан при помощи приложения 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();Это создаст следующее разделение:
This is a message
Стандартные стили для оповещений можно найти в 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); }
}Надеемся, что вам понравились эти маленькие идеи, и они вдохновят вас на собственные стили и проекты!