Wie man mit den Wegpunktanimationen den Seitenlauf flüssiger gestaltet?

Question

Ich habe ein paar Abschnitte auf meiner Seite mit Wegpunkten css3 Animationen auf ihnen. Sie erreichen die Bereiche entweder durch Klicken auf den Menü-Link oder durch Scrollen nach unten und ich möchte, dass Wegpunkte in beiden Fällen ausgelöst werden.

Die Sache ist, dass Abschnitte: Über, Dienste, Preise, Galerie, Team usw. und sagen wir, Klicken auf Galerie, möchte ich nicht die vorherigen Abschnitte zu schießen, da die Seite überhaupt nicht reibungslos.

Bisher konnte ich diese (und so weiter für andere Abschnitte) schreiben:

für andere Abschnitte

var prices = new Waypoint({ 
     element: document.getElementById('prices'), 
     handler: function(direction) { 
      // animations in the section 
     }, 
     offset: 410 
     }); 

und so weiter. Dann sperre ich Waypoints auf den vorherigen Abschnitten, wenn der angeklickt Menüpunkt weiter die Straße hinunter ist:

$('.link').click(function(){ 
    var nameOfLink = $(this).attr('href').replace('#', ''); 

    if(nameOfLink == 'prices') { 
     Waypoint.disableAll(); 
     navbar.enable(); 
     prices.enable(); 
    } 
    if(nameOfLink == 'gallery') { 
     Waypoint.disableAll(); 
     navbar.enable(); 
     gallery.enable(); 
    } 
    if(nameOfLink == 'team') { 
     Waypoint.disableAll(); 
     navbar.enable(); 
     team.enable(); 
    } 

Und hier ist der glatte Scroll-Code:

$('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top -104 
    }, 1000); 
    return false; 

});

Es funktioniert zwar reibungsloser als vorher, aber immer noch nicht so flüssig, wie ich es gerne hätte (und wie ich es auf anderen Webseiten gesehen habe).

Wie kann ich es effektiver machen?

Answer 1

Sie haben ein paar Optionen Ihre gewünschte Maß an ‚Glätte‘ zu erreichen, wenn mit der animate() Funktion:

1) Sie können ändern Sie die easing Funktion in der Animation verwendet (Standard Lockerung ist swing), das ist sehr wahrscheinlich, was das Ergebnis Sie suchen, zum Beispiel ändern bekommen müssen:

$('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top -104 
}, 1000, 'easeInOutQuart'); 

die vollständige Liste Optionen der Lockerung gefunden werden kann.

2) Sie können auch die duration Parameter der animate() Funktion ändern, die Geschwindigkeit des blättern zu steuern (wie lange es dauert die Animation in Millisekunden abgeschlossen).

* Erfordert die Aufnahme der jQuery UI-Bibliothek.