Dynamische-Navigationsleiste

Marvin_G schrieb am 18.06.2015 um 18:23 Uhr

Hallo allerseits,
ist es möglich mit dem WebDesigner eine Dynamische Navigationsleiste zu erstellen?
Sodass sie sich beim Scrollen verändert.

Zum Beispiel:

dass sich die Größe des Logos verändert
dass sich die Schrift-Eigenschaften verändert (z.B. Fett-Kursiv-Unterstrichen oder sogar eine ganz andere Schriftart)
dass die Navigationsleiste bei dem Betreten der Seite mehr mittig fixiert ist und erst wenn sie den oberen Bildschirmrand berührt (durch hinunter scrollen) immer dort verankert bleibt (sodass die Leiste immer im Sichtfeld bleibt)

Eine Seite wo ich Punkt-1 der genannten Effekte gefunden habe ---> ideenfabrik.at

Technische Details:
Software: Magix Web Designer 11 Premium
Betriebssystem: Windows 8.1

Danke im Voraus :)

Kommentare

BeRo schrieb am 18.06.2015 um 21:35 Uhr

Punkt 1 und 2 aus Deiner Wunschliste lässt sich relativ einfach realisieren, wenn Du die neue Funktion "Web-Animation" benutzt.

Damit lässt sich jedes beliebige Objekt ein- bzw. ausblenden, wenn eine bestimmte Scroll Position erreicht wird. Die Scroll Position wird dabei durch ein Trigger Objekt markiert, das an dieser Position sichtbar ist. Das kann ggf. auch ein transparentes Objekt sein, das nur vom WD "gesehen" wird, nicht vom Besucher der Site.

In Deinem Fall legst Du auf einer Position zwei Navigationsbereiche an, die in der Funktion identisch sind, die sich aber in der Größe-, Farbe-, Formatierung-, Textauszeichnung-, etc. unterscheiden.

Mit der "Auftauchen" Funktion der Web-Animation sorgst Du dafür, dass z. B. der optisch größere der beiden Navigationsbereiche sofort sichtbar ist. Damit wird der darunterliegende kleinere Nav Bereich verdeckt.
Wenn die Seite nach oben gescrollt wird verlässt das Trigger Objekt (z. B. ein transparentes Rechteck) den sichtbaren Seitenbereich, was automatisch den größeren Nav Bereich ausblendet und den kleineren Nav Bereich sichtbar macht.

Für den Besucher der Site sieht das so aus, als würde der am Anfang sichtbare Nav Bereich beim Scrollen verkleinert.

Punkt 3 aus Deiner Wunschliste ist mit ein paar Zeilen HTML- und JavaScript Code zu realisieren. Wie das geht, das habe ich hier vor ein paar Stunden in einem anderen Zusammenhang erklärt...

Viel Erfolg