Visuelle Effekte mit Moo.Fx

Moo.Fx ist ein kleines JavaScipt Libary, das dynamische visuelle Effekte auf Webseiten ermöglicht. Dieses Tutorial stellt die Handhabung von Moo.Fx kurz vor.

Einleitung

Moo.fx ermöglicht die einfache Manipulation der Transparenz, Grösse und verschiedener anderer Attribute (fast) beliebiger HTML Elemente durch Javascript Funktionsaufrufe. Der Vorteil dieser Lösung liegt vor allem in geringen Größe der benötigten Dateien, die um eine Vielfacher kleiner sind als vergleichbare Produkte.
Das Moo.Fx Packet ist auf der seite von madmilk kostenfrei verfügbar. Inhalt des zips sind die drei JavaScript Dateien moo.fx.js, moo.fx.pack.js und prototype.lite.js. Das prototype libary ist die Basis von Moo.fx und muss auf jeden Fall in die HTML Datei inkludiert werden. Die beiden moo.fx libarys sind zum einen das Basislib und die Effekt-Pack-lib.

Inkludieren der Libarys

Als erstes muss man in dem betreffenden (X)HTML Dokument im Head Bereich die Beiden JavaScript Bibliotheken einbinden: <script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script> Anschließend kann man Effekte definieren die über das window.onload Objekt beim Laden der Seite iniiert werden. window.onload = function()
{
.........
.........
}

Die Effekte

Grundsätzlich gibt es 3 Effekte in moo.fx (mehr dann im effekt pack):

• fx.Height - ändert die Höhe
• fx.Width - ändert die Breite
• fx.Opacity - ändert die Transparenz

um einen Effekt so instanzieren muss dieser im wondow.onload Bereich so geladen werden: window.onload = function()
{
myeffectHeight = new fx.Height('container', {duration: 400, onComplete: function()
{
alert('the effect is completed');
}
});
} myeffectHeight ist dabei die instanzierte Klasse des moo.fx Effektes "Height". Der Effekt bezieht sich auf deen CSS Selektor "container" und besitzt die Optionen "duration" und "onComplete".

• duration - Dauer des Effektes, in Millisekunden
• onComplete - nach Beendigung des Effekts kann eine zusätzliche Funktion aufgerufen werden

Für myeffectHeight und generell für jeden Effekt stehen folgenen Methoden zur verfügung

• toggle - löst den Effekt aus
• hide - versteckt ein Objekt
• custom(x,y) - führt den Effekt mit eigenen Werten aus.

Hier ein Beispiel wie der erstellte Effekt im (X)HTML Dokument integriert und beim click ausgelöst wird: <p onclick="myeffectHeight.toggle();">Lorem ipsum.</p>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed metus quis arcu tempus condimentum. Aenean eu odio. Mauris vehicula dui ut massa. In ac.</p>
</div>


Und nun das ganze in Action:

Weitere Demos

Seitliches einblinden

Effekt definieren im window.onload Bereich myeffectWidth= new fx.Width('container2' {duration:200]); Aufrufen am HTML Teil: <a onclick="myeffectWidth.toggle();" style="cursor:pointer">Lorem ipsum</a>
<div id="container2">
............................
</div>


Transparenz Effekt mit verstecktem Teil im Ausgangszustand

Effekt definieren im window.onload Bereich myeffectTrans = new fx.Opacity('container3', {duration: 300}); myeffectTrans.hide() Aufrufen am HTML Teil: <a onclick="myeffectTrans.toggle();" style="cursor:pointer">Lorem ipsum</a>
<div id="container3">
............................
</div>
Lorem ipsum