Плывущий фон
Пожалуйста, подскажите как менее ресурсозатратно сделать плывущий фон на странице? Пробывал тремя разными способами:
1) с помощью плагина Background-Position. 2) с помщью вот такого скрипта:
$(function(){
// ***
// Scrolling background
// ***
var backgroundheight = 4000;
// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100;
// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 4);
function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 1
);
}
// Start the animation
scrollbackground();
});
3) с помощью вот ткого:
var current = 0; // Текущая строка пикселей
function scrollBg(){
//Переходим к следующей строке пикселей
current -= 1;
//Если конец изображения, то переходим снова вверх
if (current == -4000){
current = 0;
}
//Устанавливаем CSS заголовка
$('body').css("background-position","0 "+current+"px");
}
//Вызываем прокручивающую функцию повторно
var init = setInterval("scrollBg()", 0);
Бекфон стоит на боди. Сам рисунок фона весит 140кб. Во всех трех случаях скрипт полностью убивает одно ядро процессора. В фф так вообще тормозит жутко. Пробывал ставить фон на слой а не на боди и пробывал ставить рисунок полегче (60кб), результат всегда один и тот же - проц грузится до предела. Посоветуйте, что делать? Уж очень нужен эффект плывущего фона. |
А принципиально на javascript?
Если я Вас правильно понял.... Воможно HTML поможет? - например тег - <marquee>Демонстрация "Плывущего" или "Прокручивающегося" рисунка</marquee> + параметри |
Цитата:
Цитата:
выставьте таймаут побольше PS http://javascript.ru/tutorial/object...ord#apply-call |
Цитата:
Цитата:
|
не ту ссылку кинул
http://javascript.ru/blog/Andrej-Par...cii-JavaScript |
Цитата:
|
Вот как я вижу ето - возможно я вновь не прав
<BODY>
<body background="pic.jpg">
<script language="JavaScript">
<!-- Begin
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64);
// End -->
</script>
</BODY>
|
плывут по небу облака ....)))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{
background-image:url('http://www.the-best-site.ru/images/bg027.gif');
}
</style>
<script language="JavaScript" type="text/javascript">
window.setInterval(function () {
if (!this.a || this.a < 0) this.a = 200;
else this.a--;
document.body.style.backgroundPosition = this.a + "px 100%"
}, 50);
</script>
</head>
<body></body>
</html>
|
Всем большое спасибо за помощь. Остановился на вот этом варианте:
var current = 0; // Текущая строка пикселей
function scrollBg(){
//Переходим к следующей строке пикселей
current -= 1;
//Если конец изображения, то переходим снова вверх
if (current == -2000){
current = 0;
}
//Устанавливаем CSS заголовка
$('body').css("background-position","0 "+current+"px");
}
//Вызываем прокручивающую функцию повторно
var init = setInterval("scrollBg()", 60);
Тесты показали, что это самый оптимальный вариант. Нагрузка на проц максимум 25%. Все остальные варианты перепробывал с различными параметрами и все они проиграли данному. Картинка плывет более-менее плавно и не тормазит. Еще раз всем спасибо! |
| Часовой пояс GMT +3, время: 08:54. |