2016-10-28 13 views
0

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!

Antwort

0

Sie verwenden Greensock's GSAP stark für diese, die eine große Lib ist, aber eher eine Unternehmenslösung und eine anständige Lernkurve.

Ein guter Ort zum Starten wäre requestAnimationFrame und eine Drosselung Methode (ich habe Lodash für dieses Beispiel).

Mit translateY (oder X oder 3d) hilft auch anstelle von top

Hier ist eine JSBin Demo mit HTML/CSS/JS, aber hier ist das entsprechende Bit:

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); 

Geben Sie dem CSS eine transition kann auch die Fluidität helfen. Nur 50ms in diesem Fall, da es wiederholt zündet. Es simuliert einen Geschwindigkeits-/Impuls-Effekt

+0

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! –