Сделал вот такую анимацию на jquery.
function anima() {
function eternalmotion() {
$('.moon').animate({
marginLeft: +parseInt($(document).width())
}, 20000, 'linear',
function() {
$('.moon').css({
'marginLeft': $baseMoon
});
} );
$('.stars_front').animate({
backgroundPosition: -parseInt($(document).width())
}, 30000, 'linear',
function() {
$('.stars_front').css({
'backgroundPosition': 0
});
//eternalmotion();
} );
$('.stars_back').animate({
backgroundPosition: +parseInt($(document).width())
}, 10000, 'linear',
function() {
$('.stars_back').css({
'backgroundPosition': 0
});
//eternalmotion();
} );
eternalmotion();
}
eternalmotion();
};
anima();
То есть двигаю я тут 3 слоя. Первый двигаю сам слой, другие 2 только background. Такая анимация сильно грузит процессор (90-95%) как мне ее оптимизировать? Или на jquery такого делать не стоит и лучше воспользоваться flash.
UPD:
Пробывал по разному как советовали в комментариях ничего прироста не дало. Появился новый вопрос если слой .stars_front и .stars_back имеют размеры 1200 на 400 и содержат в себе изображение такого разрешения может ли это вызывать лаги? Если я это изображение поделю на блоки будет ли выполнятся скрипт быстрее?