Пожалуйста, подскажите как менее ресурсозатратно сделать плывущий фон на странице? Пробывал тремя разными способами:
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кб), результат всегда один и тот же - проц грузится до предела.
Посоветуйте, что делать? Уж очень нужен эффект плывущего фона.
