В данном уроке мы разберемся, как сделать средствами CSS выскакивающее сверху окна браузера сообщение, которое скрывается через определенное время.
Делаем простой div:
<div id="note">
Текст сообщения будет написан здесь.
</div>
Затем задаем для него стили и помещаем вверх экрана:
#note {
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #fde073;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
Определим анимацию, которая будет скрывать наше сообщение выше области просмотра и выводить его на короткое время.
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }
}
Отвлечемся на минуту на те браузеры, которые не поддерживают анимаций и трансформации. Для них сообщение будет выводиться все время с возможностью закрыть его. Будем использовать Modernizr для проверки поддержки анимации и трансформации, а CSS код будет запускать особенный функционал только в случае поддержки его браузером.
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
Здесь 1.0s задержка перед запуском анимации. Сообщение, которое появляется не сразу, а с задержкой, является более заметным.
Добавим кнопку закрытия в наш код HTML:
<div id="note">
Текст сообщения будет написан здесь. <a id="close">[закрыть]</a>
</div>
И придется использовать JavaScript, чтобы закрыть сообщение в тех браузерах, которые не поддерживают анимации и трансформации:
<script>
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
</script>
Никаких библиотек не используем. Остается только скрыть кнопку закрытия для поддерживающих анимации браузеров:
.cssanimations.csstransforms #close {
display: none;
}
Готово!