Движущийся фон на jQuery

Віталий

10 років ago

Доброго времени суток. 🙂

У меня была работа, когда заказчик попросил добавить к сайту какой-то эффект с общим фоном, чтобы это не была просто статичная картинка. Поискав немного на просторах интернета, нашел на одном из форумов скрипт, правда он сначала не работал, потому туда и попал, человек искал решение как его запустить. Немного помучившись и заменив некоторые строки, все заработало. Данный скрипт осуществлял движение фона по горизонтали или по вертикали. Можно двигать одну длинную картинку на определенное расстояние, а можно взять короткое изображение, которое можно зациклить и получится ощущение беспрерывного движения. Ниже можно посмотреть пример.

Чтобы сделать такое горизонтальное или вертикальное движение фона на сайте, Вам нужно добавить несколько новых элементов себе.

В самом начале Вы должны знать, где будет двигаться Фон. Это будет общий фон сайта или определенный div-блок. Если это div-блок

<div class="ret"></div>

Ему нужно в стилях задать фоновую картинку. Также нужно определится с самой картинкой. В нашем случаи это картинка шириной 277 пикселей, высотой - 272 и бесконечная, та что при стыковке сама с собой не имеет границ. Движение будет осуществляться по горизонтали - слева направо, для этого укажем параметр - repeat-x.

.ret{
height:272px;
background:url(bg.jpg) repeat-x;
}

Если нужно заставить двигаться общий фон, то просто присвойте стили - body

.body{
background:url(bg.jpg) repeat-x;
}

Если Вы будете делать движение по вертикали, то для бесконечного фона установите параметр repeat-y.

Теперь нужно в шапке Вашего сайта перед закрывающимся head, ну или в подвале перед закрывающимсяbody, сначала подключить библиотеку jQuery, потом сам скрипт. Если Вы подключали ранее библиотеку, то делать этого больше не нужно, чтобы не спровоцировать конфликт.

Подключение библиотеки jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Подключение скрипта

<script type="text/javascript">
var bg_Offset = 0;
function scroll_bg(){
    bg_Offset = bg_Offset + 1;
    if (bg_Offset > 277) bg_Offset = 0;
    $(".ret").css("backgroundPosition", bg_Offset + "px 0px");
}
$(document).ready(function(){ setInterval("scroll_bg()",50); });
</script>

Скрипт имеет некоторые настройки:

В пятой строке указан класс - .ret - это класс блока к которому будет совершена анимация движения фона. Если Вы хотите двигать общий фон сайта, то замените .ret на body
277 - это размер картинки в пикселях. Если у Вас будет горизонтальное движение, то указывайте ширину изображения, если вертикальное, то высоту.
Значение 50 - это задержка в миллисекундах, между движениями картинки. Чем меньше число, тем быстрее двигается фон и наоборот.

Как и говорил, данный пример двигает горизонтально слева - направо. Чтобы изменить направление движения нужно заменить 3 и 4 строку

Это:

    bg_Offset = bg_Offset + 1;
    if (bg_Offset > 277) bg_Offset = 0;

На это:

bg_Offset = bg_Offset - 1;
if (bg_Offset < 0) bg_Offset = 277;

Этот же фокус совершать при изменении вертикального движения. Изначально - сверху вниз. Второй код вставлять, если нужно двигать снизу вверх.

Для того чтобы сделать вертикальное движение, нужно заменить полностью пятою строку.

Это:

$(".ret").css("backgroundPosition", bg_Offset + "px 0px");

На это:

$(".ret").css("backgroundPosition", "0px " + bg_Offset + "px");

Много текста написал, но думаю разберетесь, сложного, то особо ничего нет. Если все правильно сделаете, то увидите циклическое горизонтальное или вертикальное движение фона.

На этом все, спасибо за внимание. 🙂

Exit mobile version