Главная
Web-дизайн
Движущийся фон на jQuery

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

Движение фона

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

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



Пример

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

В самом начале Вы должны знать, где будет двигаться Фон. Это будет общий фон сайта или определенный 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>

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

  1. В пятой строке указан класс - .ret - это класс блока к которому будет совершена анимация движения фона. Если Вы хотите двигать общий фон сайта, то замените .ret на body
  2. 277 - это размер картинки в пикселях. Если у Вас будет горизонтальное движение, то указывайте ширину изображения, если вертикальное, то высоту.
  3. Значение 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");

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

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 5 из 5)

Опубликовано 3 комментария

  • Руслан
    Комментариев: 2

    а как сделать чтобы одна картинка в право, а другая в лево ?

    • Виталий
      Комментариев: 267

      Применить к каждой картинке свой скрипт.Только изменить имя класса и имя функции. В первом .ret а во втором например .ret2
      scroll_bg и scroll_bg2
      bg_Offset и bg_Offset2
      Также в статье написано как менять направление слева направо.В первом скрипте будет -
      bg_Offset = bg_Offset + 1;
      if (bg_Offset > 277) bg_Offset = 0;
      Во втором наоборот
      bg_Offset = bg_Offset - 1;
      if (bg_Offset < 0) bg_Offset = 277;
      естественно 277 это ширина картинки, замените на те размеры что будут у ваших картинках.

  • Руслан
    Комментариев: 2

    Спасибо Виталий, получилось! 🙂

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий