Menu-Effekt, wie wird das gemacht?

[elyion_g2]

Hi Leute,

Ich bin erst gerade auf einen coolen Effekt gestossen und wollte euch fragen ob ihr wisst wie man das anstellt:
http://www.sketchin.ch/en/services/

Es geht um das Menu links, scrollt man runter ändert isch die Schriftfarbe und die Logo-Farben.. nach langem herumprobieren habe ich es noch nicht hinbekommen.

Habt ihr eine Idee?

 

[ArcaJeth]

AW: Menu-Effekt, wie wird das gemacht?

Es sind 2 Menüs die genau übereinander liegen (einmal schwarz, einmal weiss) - mit CSS (clip) wird dann von jedem der beiden Menüs nur der Teil angezeigt der zu sehen sein soll und die Werte beim Clip werden beim jedem Scrollen mit JS entsprechend geändert.

 

[elyion_g2]

AW: Menu-Effekt, wie wird das gemacht?

okey.. aber wie funktioniert den das auf den seiten.. ich meine die content-div's mit den bildern oder dem weissen hintergrund sind nie gleich hoch.. ich blicke einfach nicht durch wie diese funktion im javascript aussehen sollte beim scrollen - es muss ja erkannt werden welcher div welches menu anzeigt und wo dann der clip ist...

 

[Myhar]

AW: Menu-Effekt, wie wird das gemacht?

Wenn es dir um das Javascript geht, das kannst du dir bei deinem verlinkten Beispiel ansehen. Bei jedem scrollen (und zusätzlich bei resize und onload) wird die clipping Funktion aufgerufen. Da sieht man, wie die Clipping Bereiche jeweils individuell berechnet werden. So trivial ist das aber auf den ersten Blick nicht ;-)
Such im JS einfach nach function clipping(event) { dann hast du deine gewünschte Funktion.

 

[ArcaJeth]

AW: Menu-Effekt, wie wird das gemacht?

Man kann ja aber per JS die Position und Höhe jedes DIVs auslesen, genauso kann man die vertikale Scrollposition abfragen.
Ich hole mir also die Höhe des Menüs, die Scrollposition und die Positionen der farbigen DIVs. Dann entscheide & berechne ich welches Menü wie angezeigt werden soll und ändere die CSS-Werte vom clip entsprechend.

 

[elyion_g2]

AW: Menu-Effekt, wie wird das gemacht?

closed, dankeschön .. habe den code mir angesehen und nachgebaut

 

[teste123]

AW: Menu-Effekt, wie wird das gemacht?

closed, dankeschön .. habe den code mir angesehen und nachgebaut

hast du deine Seite schon hochgeladen, möchte gerne sehen
MfG
Teste123