Как повысить FPS на странице с движущимся фоном?

Question

[tokieee]

Пациент: imatte.ru/work/level_test

Имеется SVG фон, который пролистывается снизу вверх. Но это дело дико лагает. Можно ли поднять FPS?

setTimeout(function(){
	$('#big-slider ').animate({
	  'background-position-y': '0%'
	}, 20000);

	$('#big-slider .content').animate({
	  'bottom': '380px'
	}, 20000);

	setTimeout(function(){
		$('#big-slider .content p.desc').animate({
		  'color': '#fff !important'
		}, 4000);
	}, 16000);
}, 5000);

Comments

[Dmitry Bay]

мне кажется, что у вас внутри svg много элементов, и они дают подобный сбой.
возможно поможет картинка обычная, со всеми ее минусами.

[Дамир Синицын]

А чем вам собственно "гифка обыкновенная" не понравилась?

Answer 1

[Сергей Горячев]

Вот мой пример
Напишите фон на css, у меня та же проблема была с svg и jquery анимацией.
Заменили на css и стало летать)

Answer 2

[xmoonlight]

SVG->JPG "налету":
stackoverflow.com/questions/4809194/convert-svg-im...

Answer 3

[Алексей Лебедев]

Используйте translate:

$("#").css({'transform': 'translate('+tmp_left+'px,'+tmp_top+'px)', '-webkit-transform': 'translate('+tmp_left+'px,'+tmp_top+'px)' });

Фон по возможности в PNG или JPG