Здравствуйте, скоро “Новый Год” и пора начать думать как украсить наши замечательные сайты! Сегодня предлагаю вам установить прыгающий новогодний шарик на ваш сайт, инструкцию читайте ниже.
Скачать исходники для статьи можно ниже
1. Нам нужен рисунок с новогодним шаром, например вот такой:
Скачать данный шар можно – по данной ссылке!
2. Нужно прописать код шарика на сайте.
Для примера возьмем стандартную wordpress тему – Twenty Fifteen.
Заходим в файл header.php – для этого в админке, в левом меню, выбираем пункт “Внешний вид”, его подпункт “Редактор”, справа в списке шаблонов выбираем файл – header.php.
Здесь сразу после тега:
</head>
Прописываем следующий код изображения:
<img class="plane sw-plane" src="/wp-content/uploads/2015/11/mnogoball.png"/>
Если вы закачали изображения шарика к себе на сайт, то ссылку до него нужно поменять.
3. Прописываем стили для изображения.
Для этого нам нужно зайти в файл стилей – style.css – в админке, в левом меню выбираем пункт “Внешний вид”, далее его подпункт “Редактор”, справа в списке шаблонов файл – style.css.
Переходим в конец кода данного файла и добавляем следующее:
.sw-plane {
position: absolute;
z-index: 99999;
top: -60px;
right: 10px;
width: 100px;
height: 329px;
}
.plane {
-webkit-animation: sw-plane-bounce 1s infinite ease-in-out;
-moz-animation: sw-plane-bounce 1s infinite ease-in-out;
-o-animation: sw-plane-bounce 1s infinite ease-in-out;
animation: sw-plane-bounce 1s infinite ease-in-out;
}
@-webkit-keyframes sw-plane-bounce
{
from {margin-top: 0px;}
50% {margin-top: 30px;}
to {margin-top: 0px;}
}
@keyframes sw-plane-bounce
{
from {margin-top: 0px;}
50% {margin-top: 30px;}
to {margin-top: 0px;}
}
.mix-anim.run-animation {
-webkit-animation: mix-anim1 4.125s steps(50) forwards;
-moz-animation: mix-anim1 4.125s steps(50) forwards;
-ms-animation: mix-anim1 4.125s steps(50) forwards;
-o-animation: mix-anim1 4.125s steps(50) forwards;
animation: mix-anim1 4.125s steps(50) forwards;