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

1. Нам нужен рисунок с новогодним шаром, например вот такой:

Скачать данный шар можно – по данной ссылке!

2. Нужно прописать код шарика на сайте.

Для примера возьмем стандартную wordpress тему – Twenty Fifteen.
Заходим в файл header.php – для этого в админке, в левом меню, выбираем пункт “Внешний вид”, его подпункт “Редактор”, справа в списке шаблонов выбираем файл – header.php.

Здесь сразу после тега:

</head>

Прописываем следующий код изображения:

<img class="plane sw-plane" src="http://xn--90adb5acghbc.xn--p1acf/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;