Chräcker Heller: Scroll-Menü

Beitrag lesen

Hallo,

ich denke mal schon.

Ansatzüberlegungen von mir dazu:

Wenn man einen Linktext über den Bildschirm bewegen möchte, setzt man selbigen am besten in einen Div-bereich, den man

a) per CSS-definition pixelgenau positioniert und
b) diese Koordinaten (hier die left:-Koordinate) per JS dynamisch ändert.

Also: "Klick-mich" als Link in ein Div (oder natürlich als image-Link) und mal eine Schleife bauen, die permanent die left-Koordinate ändert. Für den Anfang würde ich, um es mal zu testen un "meine" Fähigkeit zu schulen, die left-Koordinate (die eben die position vom linken Bildschirmrand angibt) zwischen folgenden Werten hochzählen lassen:

  • erstmal:

von 0 bis zur Fensterbreite. (Die natürlich vorher ausgelesen werden muß) - wird die left-Koordinate hochgezählt (das sollte matürlich mit einer Verzögerungsschleife geschehen, sonst rast das Div nur so über den bildschirm....), dann bewegt sich das Div von links nach rechts aus dem sichtbaren Bereich hinaus.

  • dann:

von (0 minus Div-Breite) bis zur Fensterbreite

Damit läuft das Div von links herein und verschwindet wiederum nach rechts aus dem fenster

  • NACHTEIL: es gibt beim rausschieben am rechten Rand einen horizontalen Scrollbalken. Deswegen hier vorab zwischengeschoben, bevor ich weiter schwadroniere: besser das Menü nicht über die ganze Breite des Fensters laufen lassen, sondern nur bis zur Fensterbreite minus Divbreite. Dort schiebt sich das Div dann unter ein bereits dort positioniertes gleichgroßes Div, das per z-Index höher liegt und ein image mit der Hintergrundfarbe der Seite beherbergt. Selbiges "deckeldiv" gibts dann auch auf der linken Seite, unter dem der Link-Div hervorgekrochen kommt. Auf meiner Stempelseite (unten (!) verlinkt) habe ich das so mit dem Motivauswahlfensterchen (weiter hinten in der Site) gemacht....)

  • dann:

jetzt haben wir also einen Link, der stetig von links nach rechts wandert, dort verschwindet und links wieder erscheint. Sobald das wandernde Div des ersten Linkes aus seiner "Garage" (also dem linken Deckeldiv) hervorgekrochen ist, muß sofort ein zweites bewegliches Div hinterher geschoben werden. Mit dem zweiten link drauf. Hinter dem kommt dann ein drittes Div etc.... So haben wir eine Reihe von Div-Bereichen, die schön von links nach rechts wandern, sich dort unter einem Deckeldiv verkriechen und links wieder erscheinen und dort von neuem unter dem dortigen Deckeldiv hervorgekrochen werden.

  • UND JETZT:

mußt Du die left-Koordinaten-raufzählroutiene in Abhängigkeit zur Mausposition bringen. Steht die Maus auf der x-Position: (Fensterbreite/2) dann stoppt alles. Je höher sich die x-Koordinate von (fensterbreite/2) entfernt, desto schneller müssen sich die Divs von rechts nach links bewegen (der Wert, der also immer von left abgezogen wird, wird immer größer), je mehr man die Maus nach links von der Position (fensterbreite/2) bewegt, desto höher wird der Wert, der je Schleifendurchgang auf die Left-Koordinate gezählt wird.

____

Eigentlich ganz einfach ;-)))))))))

Chräcker