EDIT: Das Problem war JavaScript Animationen anstelle von CSS-Übergängen. Der Codepen zeigt jetzt ein funktionierendes Beispiel, in dem JS nur zum Übersetzen der Elemente verwendet wird und CSS zum Animieren verwendet wird!Jquery animieren css beim Scrollen verursacht Jitter
Ich versuche einen bestimmten Effekt zu erreichen, den ich auf dieser Website gesehen habe: https://draft.co.jp/en/projects/page/geechs.
Sie verwenden einen fest positionierten Hauptabschnitt innerhalb eines Körperelements, das eine feste Höhe hat (um die Bildlaufleiste zu erzeugen). Nach dem Scrollen übersetzen sie alle Elemente innerhalb des Hauptelements im Verhältnis zu $ (window) .scrollTop(). Sie verwenden eine Animation, die diesen Effekt glättet.
Ich habe versucht, diesen Effekt neu zu erstellen, aber mein Code wird ein jittered Erfahrung nach ein paar Schriftrollen erzeugen. (siehe https://codepen.io/blauwhelm/pen/LRorNA für ein Beispiel).
Es scheint, dass das Generieren einer Menge von Animationen (ich verwende Übergang über ein jquery-Plugin in diesem Beispiel, um die Eigenschaft translate zu animieren) dieses Problem verursacht. Ich habe bereits versucht, Throttling zu verwenden, um die Anzahl der Trigger zu begrenzen, aber das behebt das Problem nicht.
Mein 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);
});
Irgendwie gibt es viel mehr 'Ende Animation' -Nachrichten als 'Scroll-Trigger', die ich nicht verstehe, auch.
Irgendjemand irgendwelche Ideen, wie ich die nervösen Animationen beheben kann?
Danke!
Vielen Dank für Ihre Antwort. Nachdem ich mit Ihrem Code gespielt habe, ist mir aufgefallen, dass ich JS animate, aber CSS transition nicht verwenden sollte. Dies löst das Problem! –