Maschinendenk

Moo FX Effektpack

0 Kommentare

Für die Javascript Effektbibliothek Moo.FX steht neben den Grundeffekten, welche in die Bibliothek integriert sind, auch eine Effektbibliothek zur Verfügung.

Diese Effektbibliothek ermöglicht aufbauend auf die 3 Grundeffekte Height, Width und Opacity die einfache Realisierung komplexerer Effekte, mit Hilfe der zusätzlichen Methoden Text und Resize.

Das Effektpack umfasst lediglich 4KB Code und ist so auch sehr lightweight und trafficschonend.

Die Einbindung in bestehende HTML Seiten gestaltet sich genau so, wie von Moo.FX gewohnt.
Man bindet Prototype.lite und Moo.FX ganz normal im HEAD Bereich seiner Seite ein.

Dann bindet man im HEAD einfach zusätzlich moo.fx.pack.js ein:

Die Effekte des Effektpacks werden, wie die Grundeffekte auch, im window.onload Element einer Seite instantiiert – und können dann jederzeit per Eventhandler oder DOM Scripting aufgerufen werden.

Funktionsdokumentation

Im Folgenden werden die einzelnen Zusatzeffekte erläutert und einfache Codebeispiele gegeben.

  • Text
    Die Methode Text ermöglicht die Manipulation der Grösse von Text.
    Standardmässig wird als Einheit “em” erwartet. Man kann aber auch mit der Option unit:”px” die Verwendung von px festlegen. Text wird mit custom(x,y) aufgerufen.
    Definition:

    <head>
    <script type="text/javascript">
    window.onload = function() 
    {
    myTextPX = new fx.Text("element", {duration: 400, unit: 'px'});
    }
    </script>
    </head>

    Beispiel:

    <a onclick="myTextPX.custom(10,20);" href="javascript:void(0);">Text von 10 auf 20px vergrössern</a>
    <div id="element">Text zum Verändern</div>
  • Resize
    Die Methode Resize ermöglicht die Manipulation der Höhe und Breite in einem Funktionsaufruf. Dies ermöglicht ein dynamisches Vergrössern und Verkleinern von beliebigen Elementen.
    Für Resize stehen die Möglichkeiten toggle() und modify(x,y) zur Verfügung.
    Ein Aufruf von toggle() bewirkt das komplette Resizen von einem Extrem zum anderen, wärend man mit modify(x,y) den Start- und Endpunkt selbst bestimmen kann.
    Definition:

    <head>
    <script type="text/javascript">
    window.onload = function() 
    {
    myResize = new fx.Resize("element", {duration: 400});</pre>
    }
    </head>

    Beispiel:

    <a onclick="myResize.modify(100,50);" href="javascript:void(0);">Text verkleinern</a>
    <div id="element">Ich bin zu gross</div>

Diese Erweiterungen der Grundfunktionalität von Moo.FX ermöglichen, denke ich, die allermeisten visuellen Effekte, die man sich wünschen kann.

Auf meiner persönlichen Wunschliste würde evtl noch ein Zusatzpack für Drag and Drop Funktionen stehen. Wobei ich mir nicht sicher bin, ob das mit der Prototype.lite Bibliothek möglich ist. Im nächsten Artikel zu Moo.FX werde ich ein kleines Beispielprojekt besprechen, um auch einmal eine praktische Anwendung zu demonstrieren.

Ressourcen

Moo Fx Einführung: http://www.ajax-info.de/moo-fx-tutorial

Projektseite: Webagentur Mad4Milk

Moo.FX Seite: MooFx

Geschrieben von Philipp

Februar 2nd, 2006 at 10:05

Veröffentlicht in Allgemein

Kommentar schreiben

Sie müssen eingeloggt sein um einen Kommentar zu verfassen.