JQuery анимация css при прокрутке вызывает дрожание

Question

EDIT: Проблема заключалась в использовании javascript-анимаций вместо переходов CSS. Теперь codepen показывает рабочий пример, в котором JS используется только для перевода элементов, а CSS используется для его анимирования!

Я пытаюсь добиться определенного эффекта, который я видел на этом веб-сайте: https://draft.co.jp/en/projects/page/geechs.

Они используют фиксированную основную часть в основном элементе корпуса, который имеет фиксированную высоту (для создания полосы прокрутки). После прокрутки они переводят все элементы в основном элементе в соотношении с $ (window) .scrollTop(). Они используют анимацию, которая сглаживает этот эффект.

Я пытался воссоздать этот эффект, но мой код будет генерировать дрожащий опыт после нескольких свитков. (см. пример https://codepen.io/blauwhelm/pen/LRorNA).

Кажется, что генерация большого количества анимаций (я использую переход через плагин jquery в этом примере для анимации свойства translate) вызывает эту проблему. Я уже пытался использовать дросселирование, чтобы ограничить количество триггеров, но это не устраняет проблему.

Мой JavaScript:

$(document).ready(function() { 

var $mainElement = $('.main__element'); 

function smoothScroller(e) { 
    var scrollTop = $(window).scrollTop(); 
    console.log('scroll trigger'); 
    $mainElement.stop(true, false).transition({y: -scrollTop}, 3000, "cubic-bezier(.19,0.88,0,.99)", function() { 
     console.log('end animation'); 
    }); 
} 

$(window).bind('scroll', smoothScroller); 
}); 

Как-то много больше сообщений «конец анимации», чем «прокрутки» триггер, который я тоже не понимаю.

У кого-нибудь есть идеи, как я могу исправить дрожащие анимации?

Спасибо!

Answer 1

Они используют GSAP Greensock для этого, что является отличной библиотекой, но больше корпоративного решения и достойной кривой обучения.

Хорошим местом для начала было бы проверить requestAnimationFrame и метод дросселирования (я использовал lodash для этого примера).

Использование translateY (или X, или 3d) помогает тоже вместо использования top

Вот JSBin демо с HTML/CSS/JS, но вот соответствующий бит:

JS

var ticking = false, 
    item = document.querySelectorAll('.item'); 


// RAF 
function update() { 
    ticking = false; 
    item[0].style.transform = 'translateY('+window.scrollY+'px)'; 
} 

function onScroll() { 
    ticking = ticking || requestAnimationFrame(update); 
} 

window.addEventListener('scroll', onScroll, false); 


// Scroll Throttle 
function throttled_version() { 
    item[1].style.transform = 'translateY('+window.scrollY+'px)'; 
} 

window.addEventListener('scroll', _.throttle(throttled_version, 16), false); 

Предоставление CSS transition может также способствовать текучести. Только 50 мс в этом случае, так как он срабатывает многократно. Он вроде имитирует эффект скорости/импульса