Очень плавная прокрутка страницы. Как сделано?

Question

[Матвей Румынин]

Немного сломал голову ;-)
Вот сайт - acme-world.com
Пытаюсь понять, отчего и как там работает скроллинг - он невероятно плавный и приятный для глаза.
Судя по коду, это некий собственный их код, в сущности, я тоже пытаюсь такое провернуть, но пока безрезультатно.
Такой плавности я добиться не могу никак. Пользуюсь jQuery, но, понимаю, что тут что-то другое...
Наилучший результат дал код отсюда - github.com/nathco/jQuery.scrollSpeed, Author: Nathan Rutzky.
Добавил реакцию на кнопки и взял easing - Expo, с длительностью в 2500. Сравниваю на глаз, и вижу,
что есть какие-то небольшие подергивания, а на том сайте - все очень плавно!!! КАК????

Answer 1

[Алексей]

Не уверен что разница только в том, но у них используется requestAnimationFrame, что вроде как должно гармоничнее работать с ресурсами браузера по сравнению с setTimeout. Плюс, кажется, анимация через css свойства.

Comments

[Матвей Румынин]

вот! спасибо. я тоже подумал, что вероятно надо избавиться от jquery animate, вот только как анимировать скролл через css3

[Алексей]

На этом сайте анимируется не скролл. Обратите внимание на бегунок прокрутки - он останавливается резко, а контент (div'ы) плавно "подъезжают" к конечной позиции.

[Матвей Румынин]

Алексей: да! я уже заметил ;-) хитрость во вложеном слое - fake-scroll. Но получается просто охренительно ;-) попробую также

[Матвей Румынин]

Вернее даже не так. fake-scroll нужен для отображения скролл-бара, а сам скроллинг происходит внутри слоя main (фикс), за счет сдвига scroll-container в нем. получается, только css-transform, отсюда такая приятная плавность. гениально