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

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


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

santa2

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

santasled

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

<div class="santa"><img src="http://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="http://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="http://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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *