Движущийся фон на jQuery
Ранее мы уже рассмотрели Скрипт движущегося фонового изображения, но у данного скрипта было пару серьезных минусов: он не работал в Firefox и работал в сочетании не со всеми DOCTYPE!.
Для устранения всех имеющихся недостатков предыдущего скрипта было принято решение сделать аналогичный скрипт движущегося фонового изображения при помощи библиотеки jQuery.
Для работы предлагаемого нами скрипта Вам потребуется подключить библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Для тега <body> необходимо прописать URL фонового изображения:
<body style="background-image:url('image/background.jpeg')">В рассматриваемом примере будет использоваться изображение размером 150 на 150 пикселей.
Теперь Вам остается только лишь добавить наш jQuery код, который будет прокручивать указанное фоновое изображение с заданными параметрами:
<script type="text/javascript">
var bg_Offset = 0;
function scroll_bg(){
bg_Offset++;
if (bg_Offset > 150) bg_Offset = 0;
$("body").css("backgroundPosition", "0 " + bg_Offset + "px");
}
$(document).ready(function(){ setInterval("scroll_bg()", 50); });
</script>Для изменения направления движения фона на движение снизу вверх, достаточно в скрипте исправить строки:
bg_Offset++;
if (bg_Offset > 150) bg_Offset = 0;на такие:
bg_Offset--;
if (bg_Offset < 0) bg_Offset = 150;Если же Вам требуется, чтобы фон двигался не сверху вниз, а слева на право, то замените в скрипте строчку:
$("body").css("backgroundPosition", "0 " + bg_Offset + "px");на такую:
$("body").css("backgroundPosition", bg_Offset + "px 0");Хотим обратить Ваше внимание на условие if (bg_Offset > 150). В данном условии число 150 означает размер фонового изображения в пикселях. Если Ваше фоновое изображение не равно 150 пикселям, то это значение в скрипте необходимо заменить для того чтобы избежать рывков при движении фона.
Для увеличения или уменьшения скорости прокрутки изображения, увеличьте или уменьшите число 50 в функции setInterval("scroll_bg()", 50);, которая отвечает за временную задержку между смещением фона.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.