Follow Me On The Web!
Webdesign-Hingucker: CSS-Attribute mittels JavaScript animieren
Um das Webdesign einer Seite aufzupeppen bietet JavaScript Webentwicklern unzählige Möglichkeiten. Allerdings ist die händische Programmierung meist recht aufwendig; gerade DHTML verlangt häufig nach Browser-spezifischen Lösungen, was die Umsetzung ungemein verkompliziert.
Daher liegt der Gedanke nahe, stattdessen auf eines der zahlreichen JavaScript-Frameworks zurückzugreifen. Besonders interessant sind dabei die Möglichkeiten, CSS-Attribute zu animieren. Neben hochwertigen Animationsroutinen sind dazu aber ebenso leistungsfähige Selektions- und Event-Handler-Routinen vonnöten.
Für die Entwicklung von Webdesign-Hinguckern haben wir daher verschiedene JavaScript-Frameworks intensiv auf ihre Fähigkeiten hinsichtlich der Animation von CSS-Eigenschaften und Webdesign-Elementen hin getestet.
Erstaunlicherweise schnitt bei unseren Tests ausgerechnet eines der ältesten und am weitesten verbreiteten JavaScript-Frameworks am schlechtesten ab, nämlich die Kombination aus Prototype und Scriptaculous.
Grund: Viele Animationsroutinen bieten schlicht nicht die nötige Qualität. Der Versuch, den Hover-Effekt der Links auf unserer Webseite mit Protoype/Scriptaculous umzusetzten, endete häufig damit, dass der Hover-Effekt sich beim schnellen Überfahren von Links mit der Maus “aufhang” oder die Links unangenehm aufblitzten.
Exzellente Ergebnisse bei gleichzeitig kompakten Code lieferte hingegen die Kombination aus jQuery und jQueryUI dicht gefolgt von MooTools. Für den besagten Hover-Effekt genügen bei jQuery schon wenige Zeilen JavaScript-Code:
$(“#main a:not(.noanim), #topnav a, #footer a”).mouseover(function() {
$(this).animate({ color: “white” }, 220);
});
$(“#main a:not(.noanim), #topnav a, #footer a”).mouseout(function() {
$(this).animate({ color: “#aaaacc” }, 320);
});
}
Tags: jQuery