—»     —»   Временные оповещения с CSS-анимациями
  Раздел: Анимация, CSS/Style Sheets   Комментариев: 2  

Временные оповещения с CSS-анимациями



Сегодня мы хотим рассказать вам о том, как разработать временные оповещения посредством анимаций в CSS. Суть заключается в том, чтобы отображать оповещение или предупреждение определенный промежуток времени, а затем скрывать его. Мы воспользуемся небольшим индикатором прогресса, чтобы отобразить, сколько времени осталось до исчезновения блока.

Временные оповещения с CSS-анимациями

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

Что касается разметки, то здесь мы просто воспользуемся разделом с сообщением внутри, а также дополнительным разделом для небольшой строки прогресса:

<div class="tn-box tn-box-color-1">
<p>Your settings have been saved successfully!</p>
<div class="tn-progress"></div>
</div>

Блок оповещения будет обозначен классами tn-box и tn-box-color-1, которые будут использоваться для определения разных цветов.

Затем мы определим стиль блока:

.tn-box {
width: 360px;
position: relative;
margin: 0 auto 20px auto;
padding: 25px 15px;
text-align: left;
border-radius: 5px;
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6);
opacity: 0;
cursor: default;
display: none;
}

.tn-box-color-1{
background: #ffe691;
border: 1px solid #f6db7b;
}

Мы выставим блоку параметр display: none, и зададим 0 в качестве значения уровня плотности отображения.

Строка прогресса будет оформлена следующим стилем:

.tn-progress {
width: 0;
height: 4px;
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 5px;
left: 2%;
border-radius: 3px;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.05),
0 -1px 0 rgba(255,255,255,0.6);
}

Изначально, у строки будет выставлено 0 в качестве параметра ширины.

В данном примере мы используем кнопку с чекбоксом, которая будет запускать анимацию сразу, как только по ней будет произведено нажатие:

input.fire-check:checked ~ section .tn-box {
display: block;
animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}

Кнопка предшествует разделу с блоками оповещения, и поэтому мы можем использовать основной родственный комбинатор.

Если вы вместо этого захотите добавить класс посредством Javscript, то можете использовать нечто вроде этого:

.tn-box.tn-box-active {
display: block;
animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}

Где tn-box-active является классом, который вы применяете к div-элементу tn-box.

Анимация самого блока выглядит следующим образом:

@keyframes fadeOut {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; transform: translateY(0px);}
99% { opacity: 0; transform: translateY(-30px);}
100% { opacity: 0; }
}

Мы назвали ее «fadeout», но на самом деле, она наоборот относится к появлению блока, и только потом способствует его исчезновению и перемещению вверх.

Анимация строки прогресса выглядит примерно следующим образом:

@keyframes runProgress {
0% { width: 0%; background: rgba(255,255,255,0.3); }
100% { width: 96%; background: rgba(255,255,255,1); }
}

Мы анимируем параметр ширины до 96% (предыдущее значение было 2%, поэтому нам и с другой стороны следует оставить 2%), и уровень плотности отображения RGBA.
Продолжительность анимации строки прогресса будет немного короче, чем продолжительность анимации, так как мы запустим ее позже (для начала блоку необходимо появиться).

Примечание: Нам показалось, что было бы неплохо останавливать анимацию при наведении курсора мыши. Это имеет смысл, если пользователю захочется прочесть оповещение. Но, к сожалению, в данном случае могут возникнуть проблемы с браузерами семейства Webkit. В Chrome (19.0.1084.56 на Win) анимация преломляется, а в Safari (5.1.5 на Win) мы получили отчет о крахе WebKit2WebProcess.exe… Данный эффект отлично работает лишь в Firefox версиями выше 12.

В любом случае, вы можете сделать это следующим образом:

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
animation-play-state: paused;
}

Можно не говорить о том, что этот эффект будет работать только в тех браузерах, где имеется поддержка CSS-анимаций! Вам потребуется продумать версию отката для старых браузеров.

И на этом все! Надеемся, что данное руководство будет полезным для вас!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5857   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 26 июня 2013 @ 22:30
Написал: Вадим — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
отличный урок!!! я 5 часов гуглил и искал как реалезовать подобное а тут вы - просто панацея!
Комментарий #2: 26 июня 2013 @ 22:46
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Вадим, пожалуйста! Рады были вам помочь.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930