Как написать свой параллакс-скрипт без «дерганий»?

Question

[Лучник *range attack +10*]

Не ругайте за кривизну (догадываюсь, что все криво), я, позор мне, почти не знаю синтаксиса JS и jQuery.

Для мелких нужд я не подключаю параллакс-библиотеки, а использую код типа такого:

$(window).scroll(function() {
	// --- Параллакс-скролинг для фона шапки Главной ---
	var howMuchScrolled = $(window).scrollTop();
	var verticalScrollSpeed = howMuchScrolled / 4; // скорость вертикального скроллинга фона
	var horizontalScrollSpeed = howMuchScrolled / 40; // скорость горизонтального скроллинга фона
	// скорость скроллинга медленнее, чем больше делитель

	var scrollDown = 0 + verticalScrollSpeed;
	var scrollRight = 50 + horizontalScrollSpeed;
	// 0 и 50 - изначальное положение фона

	$('#main-header-wrap').css('background-position', ((scrollRight)) + '%' + ((scrollDown)) + 'px');
});

Но изображение в фоне, к которому применяется эффект, дергается при скролле. Как реализовать плавный параллакс-скроллинг? Хочется попробовать сделать самому.

Comments

[Алексей]

Сделайте чтоли пример на codepen.io чтобы понять что у вас дергается.
Подозреваю что дергается из-за плавного браузерного скролла.

Answer 1

[Владимир Шестаков]

Используй css3 transform и translate, чтобы позиция плавно изменялось до новых scrollDown/scrollRight

Answer 2

[Михаил]

Также дергание будет если размер фона был изменен через background-size, это сто процентов приведет к дерганию.

Answer 3

[Александр Логинов-Солоницын]

По этому поводу есть хорошая статья - оригинал, перевод