Fixed Navigation - Animieren beim Scrollen - Darstellungsfehler


demrks

Grünschnabel
Hi,
ich habe nun nach etwas länger Zeit das erreicht, was ich schon länger vorhabe. Ich bin mir nicht sicher, ob der Javascript Bereich der Richtige ist, da auch etwas CSS und HTML zwangsläufig dazugehören, aber den größten Teil übernimmt JS bzw. jQuery. Mehr oder weniger geht es um diesen Navigationeffekt, den man auf dieser Seite sehen kann: http://nzopera.com/2013/the-flying-dutchman

1.) Scrollt man nach unten, dann wird zuerst das "padding" des Headers nach und nach weniger. Ist ein bestimmter Punkt erreicht, dann wird über den "top"-Wert die Navigation nach und nach aus dem Sichtbereich gefahren. Dies war der erste Teil, den ich bisher größtenteils hinbekommen habe.
2.) Scrollt man auf der Seite weiter nach unten, also bis zum Inhaltsbereich und dann irgendwann wieder nach oben ein kleines Stückchen, dann fährt die Navigation wieder in den Sichtbereich. Und verschwindet logischerweise wieder, wenn man nach unten fährt... Diesen Teil habe ich noch nicht angefangen, da ich erst einen Fehler bei Punkt 1.) behoben sollte.

Bisher habe ich folgenden vereinfachten Stand: http://codepen.io/anon/pen/IqyCc
Wie man sehen kann läuft es mehr oder weniger. Zwar sind viele Werte im JS fest und ich müsste die noch irgendwie dynamisch hinbekommen, sobald mir eine Möglichkeit einfällt (vielleicht mit data-attributes im HTML mit Start- und Endwert), aber das größere Problem ist, dass mein Code entweder sehr langsam ist oder sonst einen Fehler hat. Im Vergleich zu nzopera.com scheint es mir nicht ganz so flüssig, was man vor allem daran sieht, dann man wieder nach oben scrollen ein weißer kleiner Strich entsteht, weil die "padding" Animation nachzieht (siehe Screenshot im Anhang). Teilweise allerdings, wenn man schneller nach oben scrollt, bleibt dieser weiße Strich und ist auch wie im Anhang zu sehen richtig groß. Da es bei NZOpera (Link siehe obne) super flüssig läuft, muss es da irgendeine Lösung darauf geben. Wie ihr vielleicht auch sehen könnt, bin ich nicht unbedingt gut in JS, deswegen hoffe ich, dass es "einfach" nur daran liegt, dass der Code langsam ist und deutlich effizienter geschrieben werden kann. Ich hoffe ich habe es vernünftig erklärt und ihr habt eine Lösung. Vielen Dank schonmal.

Kleine Erklärung zum bisherigen JS Code: Wahrscheinlich selbsterklärend, habe ihn auch versucht etwas zu kommentieren... Hauptsächlich übernimmt die Funktion "scrollTransition" die ganze Arbeit. Diese hat folgende Parameter, um ein Element verhätnismäßig zur aktuellen Scrollposition zu "animieren":

- startValue : Der Anfangswert des Elementes
- endValue: Der Endwert, bei dem die Animation enden soll
- distance: Nach wie vielen Pixeln Scrollweg soll die Animation enden
- initScroll: Ab welchem Scrollwert (in px) soll die Animation beginnen

Um ein kleinen Beispiel zu machen. Will man ein Element von 0px bis 30px animieren und die Animation soll bei 300px anfangen und bei 600px enden, dann würden die Werte so aussehen:
- startValue = 0
- endValue = 30
- distance = 300 (da 600px Ende und bei 300px der Anfang, also Differenz sind 300px)
- initScroll = 300

Welche Eigenschaft man animiert hängt davon ab, welchen CSS Wert man setzt (siehe Codepen oben). Will ich also das padding animieren, dann würde es so aussehen:
Code:
$(".element").css("padding", RÜCKGABEWERT);

Wie schon gesagt, gehe ich davon aus, dass es einfach an der schlechten Effizienz des Codes liegt, weshalb die "Animation" so nachzieht und deshalb diesen Streifen ergibt. Immerhin wird diese Funktion bei jedem px scrollen ausgeführt und das gleich doppelt ("padding" + "top"). Vielen Dank für eure Hilfe schonmal.
 

Anhänge

  • bug.jpg
    bug.jpg
    26,8 KB · Aufrufe: 13
Zuletzt bearbeitet:

demrks

Grünschnabel
Danke, ich glaube da kann ich einige Teile davon nehmen. Ich habe glaube ich auch über das Wochenende den Fehler in meinem Code entdeckt, der die Überprüfung zu unpräzise und langsam gemacht hat. Nachdem ich ganze "props" Sache aus der Funktion scrollTransition genommen habe und es als "normale" Parameter umgeschrieben habe, lief es fast wie erwartet. Ich werde jetzt noch eine Teile von dir bei mir einbauen, dann sollte das hoffentlich gehen. Vielen Dank für die Hilfe. Jetzt kann ich mit endlich dem 2. Effekt widmen
 

tombe

Erfahrenes Mitglied
Auch wenn du es als erledigt markiert hast, trotzdem noch eine Frage: Was ist der 2. Effekt?
 

demrks

Grünschnabel
Ich habe damit den Punkt 2.) in meiner obigen Frage gemeint, also
2.) Scrollt man auf der Seite weiter nach unten, also bis zum Inhaltsbereich und dann irgendwann wieder nach oben ein kleines Stückchen, dann fährt die Navigation wieder in den Sichtbereich... Und verschwindet logischerweise wieder, wenn man nach unten fährt. [...]
 

tombe

Erfahrenes Mitglied
Bist du denn in meinem Beispiel auch mal wieder von unten nach oben gefahren? Dann passiert nämlich genau das!

Javascript:
$("#menue").fadeIn(1000);

Wenn es dir noch nicht aufgefallen ist, liegt es vielleicht daran das 1 Sekunde Verzögerung zu lange ist!?
 

demrks

Grünschnabel
Habe ich jetzt auch gesehen, das ist mir wirklich nicht aufgefallen, da ich die Sekunde nicht abgewartet habe. Das mit dem ein bzw. ausfaden würde zwar auch gehen alternativ, aber ich finde es ein wenig interessanter und schöner, wenn die Navigation (wie schon der erste Effekt) durch das Scrollen "in" (beim nach oben scrollen) und wieder "aus" (beim wieder nach unten scrollen) dem Sichtbereich fährt. Ich habe dazu den Header wieder auf position:fixed gesetzt und dadurch auch das leichte "wackeln" des Headers beim nach unten scrollen entfernt. Dann eben (genauso wie in deinem Code) mit JS überprüft, sobald ein Richtungswechsel stattfindet, um dann anhand der aktuellen Scrollposition und meiner "scrollTransition" Funktion (aus meinem ersten Beispiel) eben genau das zu erreichen. Das klappt auch soweit, allerdings eben bisher (egal wie ich auch an meinen Werten gespielt hab) immer mit einem kleinen Nachteil. Manchmal versaue ich damit den ersten Effekt (durch Wechselwirkungen), es springt teilweise ein wenig oder sonst es ist wieder langsam und "zieht nach" (wie mein ursprüngliches Problem) :) Ich hoffe, dass das noch klappt, noch habe ich nicht aufgegeben.

Bin leider direkt auch kein Programmierer, sondern ein Designer, der eben auch kleine Front-End Sachen macht und dadurch eben nicht so gut, besonders bei so einem Effekt.
 

Neue Beiträge

Forum-Statistiken

Themen
272.360
Beiträge
1.558.623
Mitglieder
187.833
Neuestes Mitglied
SirrDansen