Скрипт движущегося фонового изображения
Предлагаем Вам очень простой и в то же время полезный JavaScript код, который заставит Ваше фоновое изображение двигаться (прокручиваться). Движущийся фон Вы можете наблюдать на данной страничке.
Для получения такого же двигающегося фона, как и на данной страничке, достаточно добавить на свою страничку между тегами <body></body> следующий JavaScript код:
<script type="text/javascript">
var bg_Offset = 0;
function scroll_bg(Size) {
bg_Offset++;
if (bg_Offset > Size) bg_Offset = 0;
document.body.style.backgroundPosition = "0 " + bg_Offset + "px";
}
var Timer = window.setInterval("scroll_bg(150)", 50);
</script>При этом не забудьте в теге <body> указать путь к фоновому изображению для Вашей странички (например, <body background="image/background.jpeg">).
Для изменения направления движения фона на движение снизу вверх, достаточно в скрипте исправить bg_Offset++; на bg_Offset--;
Если Вам требуется, чтобы фон двигался не вертикально, а горизонтально (например, слева на право), то замените
в скрипте строчку:
bg_Object.style.backgroundPosition = "0 " + bg_Offset;
на такую: bg_Object.style.backgroundPosition = bg_Offset + "px 0";
Еще очень важным моментом является правильно указать значение высоты фона при вызове процедуры scroll_bg(150) для того чтобы избежать рывков при движении фона. Для увеличения или уменьшения скорости измените цифру 50 в функции window.setInterval, которая отвечает за задержку между смещением фона, на более подходящую для Вашего сайта.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
body { background-image: url(utA1vG1SSm.jpg);background-attachment: fixed; }
Где background-image: url(utA1vG1SSm.jpg); уже прописано в коде, в конце добавляю только background-attachment : fixed;
Всё работает проще и "на Ура". :)