Agentur münster-webdesign.net » jQuery http://www.muenster-webdesign.net/blog Blog zum Thema Webdesign, Webentwicklung, Web 2.0 und Content Management Systeme Sat, 28 Jan 2012 08:58:05 +0000 en hourly 1 WordPress-Plugin: Link-Hover-Effect http://www.muenster-webdesign.net/blog/link-hover-effect/ http://www.muenster-webdesign.net/blog/link-hover-effect/#comments Thu, 04 Dec 2008 06:53:36 +0000 münster-webdesign http://www.muenster-webdesign.net/blog/?p=408

WordPress-Plugin Link-Hover-Effect: Farbanimationseffekte für Hyperlinks

Name des WordPress-Plugins: Link-Hover-Effect

Ziel: Das Plugin dient als technische Demonstration für einen Grundlagenartikel für das PC-Praxis-Sonderheft zu WordPress von Data Becker.

Beschreibung: Das WordPress-Plugin “Link-Hover-Effect” fügt den Hyperlinks im Blog einen Farbanimationseffekt hinzu: Sobald der Mauszeiger sich über einem Link befindet, ändert sich die Farbe des Links nicht wie gewöhnlich schlagartig sondern stufenlos, bis die eingegebene Zielfarbe erreicht ist. Beim Verlassen läuft die Animation in umgekehrter Richtung ab.

Eine Variation dieses WordPress-Plugins ist auf dieser Seite installiert, und vermittelt einen Eindruck vom Effekt.

Start- und Zielfarbe der Animation können in der Pluginverwaltung angepasst werden. Der Animationseffekt wurde mit dem JavaScript-Framework jQuery realisiert.

Download: Link-Hover-Effect Version 1.0

]]> http://www.muenster-webdesign.net/blog/link-hover-effect/feed/ 4 Webdesign-Hingucker: CSS-Attribute mittels JavaScript animieren http://www.muenster-webdesign.net/blog/webdesign-hingucker-css-attribute-mittels-javascript-animieren/ http://www.muenster-webdesign.net/blog/webdesign-hingucker-css-attribute-mittels-javascript-animieren/#comments Mon, 01 Dec 2008 09:29:05 +0000 münster-webdesign http://www.muenster-webdesign.net/blog/?p=374 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:

function link_animation() {
$(“#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);
});
}
]]> http://www.muenster-webdesign.net/blog/webdesign-hingucker-css-attribute-mittels-javascript-animieren/feed/ 0