jQuery анимация: Санта на оленях (Дед Мороз) на сайт

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


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

Бизнес сообщество BizNet - здесь

santa2

1. Загружаем картинку Санты на свой сайт – кликните правой клавишей мыши по картинке ниже и загрузите к себе на сайт:

santasled

2. Необходимо добавить блок с изображением Санты внутрь тега body вашего сайта:

<div class="santa"><img src="https://mnogoblog.ru/wp-content/uploads/2015/12/santasled.gif" alt="" /></div>

3. Добавляем в файл стилей вашего сайта следующий код:

.santa {
position: fixed;
bottom: 10px;
right: -500px;
}

4. Добавить библиотеку jQuery на сайт (игнорировать данный пункт – если она уже есть на вашем сайте):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

5. Добавить следующий скрипт на ваш сайт:

<script type="text/javascript">
$(document).ready(function() {
var windowWidth = $(document).width();
var santa = $('.santa');
santa_right_pos = windowWidth + santa.width();
santa.right = santa_right_pos;
function movesanta(){
santa.animate({right : windowWidth +  santa.width()},15000, function(){
santa.css("right","-500px");
setTimeout(function(){
movesanta();
},10000);
});
}
movesanta();
});
</script>

ПРИМЕРЫ:
А теперь давайте рассмотрим как установить данного Санту на сайт wordpress, возьмем стандартную тему Twenty Twelve.

Пример 1. Добавим Санту только для конкретных записей/страниц сайта.

Нам понадобиться установить плагин – “jQuery in Posts, Pages”, сведения о плагине:
Последнее обновление: 7 месяцев назад.
Количество активных загрузок: 300+
Сайт плагина: “wordpress.org/plugins/jquery-in-posts-pages/”

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

<body <?php body_class(); ?>>

вставляем сразу после него следующий код:

<div class="santa"><img src="https://mnogoblog.ru/wp-content/uploads/2015/12/santasled.gif" alt="" /></div>

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

.santa {
position: fixed;
bottom: 10px;
right: -500px;
}

1.3. Добавляем скрипт Санты.
Так как мы установили плагин – jQuery in Posts, Pages – то внизу каждой записи/страницы при её редактировании/создании появиться новое окошко:

санта на сайт jquery

В него и вписываем скрипт Санты:

$(document).ready(function() {
var windowWidth = $(document).width();
var santa = $('.santa');
santa_right_pos = windowWidth + santa.width();
santa.right = santa_right_pos;
function movesanta(){
santa.animate({right : windowWidth +  santa.width()},15000, function(){
santa.css("right","-500px");
setTimeout(function(){
movesanta();
},10000);
});
}
movesanta();
});

Все готово – теперь на данной записи/страницы будет скачущий сайнта – справа налево.

santa2

Пример 2. Добавим Санту для всего сайта.

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

<body <?php body_class(); ?>>

вставляем сразу после него следующий код:

<div class="santa"><img src="https://mnogoblog.ru/wp-content/uploads/2015/12/santasled.gif" alt="" /></div>

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

.santa {
position: fixed;
bottom: 10px;
right: -500px;
}

2.3. Устанавливаем плагин, который подключает скрипты Санты на сайте.

Скачать плагин Сантыsanta.zip

Установить и активировать плагин Санты.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий