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":
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:
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:
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.
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
Zuletzt bearbeitet: