Чтобы сделать такое горизонтальное или вертикальное движение фона на сайте, Вам нужно добавить несколько новых элементов себе.
В самом начале Вы должны знать, где будет двигаться Фон. Это будет общий фон сайта или определенный 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");
Много текста написал, но думаю разберетесь, сложного, то особо ничего нет. Если все правильно сделаете, то увидите циклическое горизонтальное или вертикальное движение фона.
На этом все, спасибо за внимание. 🙂
