Navibareffekt

[Rebirth]

Hallo.

Wie realisiere ich am besten eine solche Navibar? http://digitalnature.eu/
Die 3 Links/Buttons sind ja lediglich Grafiken, die ein- & ausgefadet werden.
Wie bewerkstellige ich dies aber? CSS3?!
Ein kleines Tutorial hierzu wäre nicht schlecht!

Cheers.

 

[GustlPC]

Mit javascript, Framework jQuery.

Link: http://www.viget.com/inspire/fun-with-jquerys-animation-function/

Gruß

 

[voodoo44]

Alternativ kannst du, wenn du mal was neues ausprobieren willst, auf SVG setzen.
Das funktioniert dann nämlich auch mit deaktiviertem Javascript - und ist eigentlich auch ziemlich leicht mMn.

 

[GustlPC]

Hallo voodoo, das wäre ja toll wenn man das auch ohne javascript hinbekommen würde!

SVG sind doch nur Vektorgrafiken? Oder meinst du da etwas anderes?
Hast du dazu vielleicht einen Link parat, oder kannst es selbst kurz erklären?
Wäre super!

Gruß

 

[voodoo44]

Ich habe die Vorlesung auch nur nebenbei besucht und keine Prüfung drin abgelegt - fand es aber allemal interessant, was damit geht. Man muss sich natürlich schon ein wenig einlesen, wie das alles funktioniert - ich habe den größten Teil leider auch schon wieder vergessen.
Die Webseite vom Dozenten kann ich dir mal geben, da sind viele ausgezeichnete Beispiele zu finden:
http://svglbc.datenverdrahten.de/?code=animate&znr=on

Viel Spaß damit

 

[GustlPC]

Danke für den Link!

Ich bin eigentlich sehr viel in Thema Webdeisgn im Internet unterwegs, aber solche Sachen habe ich noch nie gesehn.

Da frage ich mich warum die Webdesignargenturen nicht auf diese Lösung zurück greifen und dennoch javascript, bzw. jquery benutzen.

Kann dies mir wer erklären?

Gruß Gustl

Edit: Naja, ich kann es mir schon erklären, weil diese kleinen Spielerein nicht wirklich für eine Webseite von belang sind, wenn Javascript deaktiviert ist, bewegt sich das ganze halt nicht.
Wieweit jetzt SVG javascript abdeckt kann ich ja nicht sagen

 

[voodoo44]

SVG deckt Javascript natürlich nicht ab - aber SVG kann eben nicht durch den User deaktiviert werden. Das ist in meinen Augen der Unterschied.

JQuery ist natürlich sehr mächtig und bietet eben etwas mehr als "nur" ein paar "stupide" Fading-Effekte. Mit SVG kann man z.B. nicht rechnen Ansonsten: Ich weiß nicht, wie es bei Firefox aussieht - zur Version 3.6 gingen noch gar keine SVG-Animationen. Inwieweit das jetzt implementiert wurde, weiß ich nicht.

SVG ist mMn eher für optische Spielerein geeignet als für eine Navigationsleiste - damit lassen sich eher Animationen für irgendwelche Grafiken zusammenschieben als Navigationsleisten. Nett finde ich es aber dennoch.

Ich wollte es auch einfach nur mal der Vollständigkeit halber erwähnen - ist eine nette Alternative zu JS.

P.S.: Bitte nicht "Webdesign" mit "Webentwicklung" verwechseln