Здравствуйте, поздравляю всех с наступающим Новым Годом! Сегодня рассмотрим небольшой код, который позволит нам вывести блок, например, в сайдбаре сайта, а после через несколько секунд скрыть его.

Скачать исходники для статьи можно ниже

Давайте для примера создадим в сайдбаре виджет “Добро пожаловать!”, который исчезнет через 5 секунд.

1. Активируем виджет “Текст”
Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Виджеты”, перетаскиваем виджет с названием “Текст” в нужный сайдбар.

И вставляем в него следующи код:

<div id='hideMe'>Добро пожаловать!</div>

2. Прописываем стили для блока
Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, откроется файл стилей – style.css, в нем вставляем (в самый низ) следующий код:

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

Сохраняем изменения.
Все готово – теперь при загрузке сайта, в сайдбаре будет находится виджет с приветствием “Добро пожаловать”, который через 5 секунд будет исчезать.