На многих сайтах уже используются уведомления разного вида: где-то это просто резко появляющийся блок с текстом, где-то это всплывающее посередине экрана окошко. Здесь идея заключается не в виде уведомления на CSS3, а в том, что у каждого блока присутствует индикатор. Как только полоска индикатора заполняется, уведомление исчезает. Индикатор нужен для того, чтобы показать пользователю через какое время уведомление исчезнет с экрана.

Для начала следует показать код самого блока с оповещением. DIV внутри другого DIV – это будет наш индикатор:

<div class="tn-box tn-box-color-1"> <p>Ваши настройки были успешно сохранены!</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 (opacity: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); }

Начально значение width – 0.

В этом примере используется checkbox, который и запускает анимацию:

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; } 

Если вы хотите добавить класс с JavaScript, то используйте этот CSS:

.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; } 

Анимация для самого блока следующая:

@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); } }

Продолжительность анимации прогрессбара будет немного меньше, чем продолжительность анимированного блока (блок должен исчезать в первую очередь).

Еще есть мысль сделать при наведении на блок уведомления, остановку индикатора, т.е. остановку анимации. Это возможно, но, к сожалению, некоторые браузеры выдают ошибку. Попробуйте следующий код:

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

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

Комментарии

comments powered by Disqus