Es gibt in Scriptaculous fünf Grundeffekte, so genannte 'Core Effects': Effect.Opacity, Effect.Scale, Effect.MoveBy, Effect.Highlight und Effect.Parallel.
Alle Effekte haben den selben Aufbau und gemeinsame Grundparameter. Ein Effekt besitzt folgenden grundlegenden Aufbau:
new Effect.Name(Element, Pflichtparameter, {Optionale, Parameter});
Element kann die ID eines Elements sein oder ein DOM Element.
Pflichtparameter kommen nicht bei allen Effekten vor. Ob und welche Pflichtparameter angegeben werden müssen, ist für jeden Effekt einzeln angegeben.
Optionale Parameter können angegeben werden, müssen aber nicht. Werden sie nicht spezifiziert, wird der Standard-Wert angenommen:
| Parameter | Beschreibung |
|---|---|
| duration | Dauer des Effekts in Sekunden. Standard:1.0. |
| fps | Frames pro Sekunde. maximal 100, Standard:25. |
| transition | Setzt eine Funktion, die den aktuellen Fortschritt eines Effektes, welcher zwischen 0.0 und 1.0 liegt verändert, sprich den Übergang eines Elements von einem Zustand zum nächsten. Funktionen die dafür angegeben werden können sind: Effect.Transitions.sinoidal (Standard), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble und Effect.Transitions.flicker. |
| from | Setzt den Startpunkt des Übergangs (transition)auf einen Wert zwischen 0.0 und 1.0. Standard: 0.0 |
| to | Setzt den Endpunkt des Übergangs (transition)auf einen Wert zwischen 0.0 und 1.0. Standard: 1.0 |
| sync | Bestimmt, ob Frames automatisch gerendert werden(false), oder mittels der render() Instanzmethode der Effekte (true). Standard: false. |
Für den transition-Parameter gibts beim Effect.MoveBy Beispiele.
Zusätzlich können noch so genannte 'Callback'- Methoden als Parameter angegeben werden, mit denen JavaScript-Funktionen an bestimmten Zuständen des Effekts ausgeführt werden können.
| Callback | Beschreibung |
|---|---|
| beforeStart | Wid aufgerufen, bevor der Effekt gestartet wird. |
| beforeUpdate | Wird bei jedem Durchlauf des Effekts vor Neuzeichnen des Elements aufgerufen. |
| afterUpdate | Wird bei jedem Durchlauf des Effekts nach Neuzeichnen des Elements aufgerufen. |
| afterFinish | Wird am Ende des Effektes, nach dem letzten Mal Neuzeichnen aufgerufen. |
Außerdem gibt es da noch ein paar nützliche Variablen, deren Werte interessant sein könnten:
| Variable | Beschreibung |
|---|---|
| effect.element | Enthält das Element, auf das der Effekt angewendet wird. |
| effect.options | Enthhält die Optionalen Parameter die übergeben wurden. |
| effect.currentFrame | Die Nummer des zuletzt gerenderten Frames. |
| effect.startOn effect.finishOn |
Die Zeit in ms, an der der Effekt gestartet wurde und dessen Ende. |
Soweit so gut. Nun werden wir und an einem "richtigen" Effect ansehen wie man mit einigen dieser Funktionen und Eigenschaften arbeitet.
Opacity bedeutet deutsch 'Deckkraft'. Genau darum geht es hier bei diesem Effekt auch. Mit diesem Effekt kann die Deckkraft eines Elements verändert werden.
Die Syntax des Effects ist ganz simpel:
new Effect.Opacity('Element', {Optionen});
Nun erstellen wir nochmal ein HTML-Dokument und binden wieder unsere zwei JavaScript-Dateien ein. Wieder benötigen wir ein div-Element, doch diesmal setzten wir auch zwei Links. Als Zieladresse setzten wir allerdings nur "#" , was soviel bedeutet, wie "der Link macht nix". Wichtig ist das onclick-Ereignis. Wird also auf den Link geklickt, wird der neue Opacity-Effekt erstellt und dem angegebenen Element zugewiesen.
<html>
<head>
<title>Beispiel 2</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
</head>
<body>
<div id="div1">Ich bin ein div-Element</div>
<p> <a href="javascript:void(0)" onclick="new Effect.Opacity( 'div1', {duration:0.8, from:1.0, to:0.2} );"> Deckkraft runter</a>
<a href="javascript:void(0)" onclick="new Effect.Opacity( 'div1', {duration:0.8, from:0.2, to:1.0} );"> Deckkraft rauf</a></p>
</body>
</html>
Beispiel - So sieht's aus!
Sehen wir uns nochmal kurz den neuen Code an:
<a href="javascript:void(0)"
onclick="new Effect.Opacity( 'div1', {duration:0.8, from:1.0, to:0.2} );">
Deckkraft runter</a>
Tritt das Ereignis 'onclick' auf, wird ein neuer Opacity-Effekt erstellt. Es wird angegeben, dass der Effekt für das Element mit der ID 'div1' ausgeführt werden soll. Der Effekt soll 0.8 Sekunden dauern, von einer Deckkraft von 1.0 (100%) bis 0.2 (20%).
Es ist also nicht wahnsinnig kompliziert mit Effekten zu arbeiten.
Dieser Effekt ermöglicht es Elemente zu skalieren,also zu vergrößern und zu verkleinern. Die Syntax ist wieder ähnlich zu Opacity, mit Ausnahme des hier vorhandenen Pflichtparameters:
new Effect.Scale('Element', Prozent, {Optionen});
Prozent steht für den Prozentsatz, um den das Element skaliert werden soll. Weiters gibt es dann auch noch optionale Parameter:
| Parameter | Beschreibung |
|---|---|
| scaleX | Bestimmt, ob das Element horizontal skaliert werden soll, Standard: true. |
| scaleY | Bestimmt, ob das Element vertikal skaliert werden soll, Standard: true. |
| scaleContent | Bestimmt, ob der Inhalt des elements mitskaliert werden soll oder nicht, Standard:true. |
| scaleFromCenter | Bestimmt ob das Element so skaliert werden soll, dass die Mitte des Elements immer an der gleichen Stelle ist (true), Standard: false. |
| scaleMode | 'box': skaliert den sichtbaren bereich des Elements (Standard) 'contents': auch die nicht sichtbaren Elemente werden skaliert {originalHeight: yyy, originalWidth: xxx}: Die genaue Größe, die das Element haben soll. |
| scaleFrom | Setzt den Startwert der Skalierung, Standard:100. |
Nun, kommen wir wieder zu einem Beispiel.
<html>
<head>
<title>Beispiel 1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
</head>
<body>
<div onclick="new Effect.Scale(this, 300)" style="width:200px; border:1px solid #000;">
Klicken zum skalieren!</div>
</body>
</html>
Beispiel 1 - Einfacher Scale-Effekt
Es wird also ein div-Bereich erstellt, der auf klick auf das 3-fache anwächst. Nun können wir die verschiedenen Eigenschaften ausprobieren.
Lassen wir das Element zum Beispiel nur in x-Richtung skalieren. dazu geben wir zusätzlich den Parameter scaleY:false an:
<div onclick="new Effect.Scale(this, 300, {scaleY: false})"
style="width:200px; height:100px; border:1px solid #000;">
Klicken zum skalieren!</div>
Beispiel 2 - Nur in x-Richtung skalieren
Das ganze geht natürlich auch in Richtung der y-Achse. Bei den obigen Beispielen fällt auf, dass sich der Inhalt der Box, also des div-Elementes mitändert. Wollen wir das nicht, so müssen wir den optionalen Parameter scaleContent=false setzen:
<div onclick="new Effect.Scale(this, 200, {scaleContent: false})"
style="width:200px; height:100px; border:1px solid #000;">
Klicken zum skalieren!</div>
Beispiel 3 - Content nicht mitskalieren
Eine Eigenschaft die auch sehr interessant sein könnte ist der scaleFromCenter-Parameter. Wir wollen nun dass sich das Element in alle Richtungen gleich ausbreitet. Dazu verschieben wir es zuerst mittels CSS Styleangaben um den Effekt zu sehen.
Bei der Gelegenheit können wir auch gleich einmal den transition-Parameter verändern und vom Default-Wert Effect.Transitions.sinoidal auf Effect.Transitions.wobble ändern. Genaue Beispiele der transition-Effekte gibts beim Effect.MoveBy Effekt.
<div onclick="new Effect.Scale(this, 200, {scaleFromCenter: false, transition:Effect.Transitions.wobble})"
style="width:200px; height:100px;; border:1px solid #000;">
Klicken zum skalieren!</div>
Beispiel 4 - Skalieren vom Mittelpunkt aus und veränderter transition-Parameter
Dieser Effekt ermöglicht es, ein Element ganz einfach um einen bestimmten x- bzw. y-Wert zu verschieben.
Die Syntax ist wieder ähnlich wie oben, nur dass diesmal die x- und y-Werte um die verschoben wird Pflichtparameter sind:
new Effect.MoveBy('Element', y, x, {Optionen});
Wichtig ist hierbei, dass für das zu verschiebende Element die CSS-Eigenschaft 'position' mit dem Wert 'absolute' oder 'relative' gesetzt ist. Wird 'position' weggelassen, kann es sein dass der Effekt in älteren Internet Explorer Versionen nicht funktioniert.
<html>
<head>
<title>Beispiel 1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
</head>
<body>
<p onclick="new Effect.MoveBy(this, 50, 100)">Klicken um zu bewegen!</p>
</body>
</html>
Beispiel 1 - Bewegen mit den Grundeinstellungen
Hier lassen sich auch sehr schön die verschiedenen transition-Parameter testen.
<p onclick="new Effect.MoveBy(this, 0, 100,
{duration:2, transition:Effect.Transitions.sinoidal})">
Sanfte Bewegung!</p>
<p onclick="new Effect.MoveBy(this, 0, 100,
{duration:2, transition:Effect.Transitions.linear})">
Lineare Bewegung!</p>
<p onclick="new Effect.MoveBy(this, 0, 100,
{duration:2, transition:Effect.Transitions.reverse})">
Verkehrte Bewegung!</p>
<p onclick="new Effect.MoveBy(this, 0, 100,
{duration:2, transition:Effect.Transitions.wobble})">
Wackelige Bewegung!</p>
<p onclick="new Effect.MoveBy(this, 0, 100,
{duration:0.5, transition:Effect.Transitions.flicker})">
Flimmernde Bewegung!</p>
Beispiel 2 - Verschiedene Übergangseffekte
Mit diesem Effekt kann zum Beispiel auch eine kleine Animation erstellt werden. Wir erstellen ein Bild, das sich in einem Rahmen hin und her bewegen soll.
<html>
<head>
<title>Beispiel 1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript">
function moveRight(){
Effect.MoveBy('p1', 0, 100,
{duration:1, transition:Effect.Transitions.sinoidal, afterFinish: moveLeft});
}
function moveLeft(){
Effect.MoveBy('p1', 0, -100,
{duration:5, transition:Effect.Transitions.sinoidal, afterFinish: moveRight});
}
</script>
</head>
<body onload="moveRight();">
<div style="width:200px; height:200px; overflow:hidden; position:absolute;">
<img src="pics/wiese.jpg" width="340" height="201" id='p1'
style="position:absolute; left:-120px; z-index:1;" />
</div>
</body>
</html>
Beispiel 3 - Eine kleine Animation
Dieses Beispiel verwendet jetzt die für alle Effekte vorhandenen Callbacks. Wir haben zwei Funktionen, moveRight() und moveLeft(). moveRight() beinhaltet einen MoveBy-Effekt der das Bild um 100 Pixel nach rechts verschiebt. Am Ende des Effektes (afterFinish) wird die Funktion moveLeft() aufgerufen. Diese beinhaltet wiederum einen MoveBy-Effekt der das Bild zurückverschiebt und nach dessen Ende wiederum moveRight() aufgerufen wird. Da beginnt das Spiel von vorne.
Gestartet wird die Animation ganz einfach durch den Befehl moveRight() im Ereignis 'onload' des 'body'-Tags.
Wichtig ist auch, dass im äusseren div-Rahmen die CSS- Eigenschaft 'overflow:hidden;' angegeben wird, sonst fährt das Bild zwar trotzdem hin und her, aber es steht über den Rahmen hinaus, was ja nicht Sinn der Sache ist.
Der nächste Effekt hebt Elemente hervor, in dem er die Hintergrundfarbe verändert.
Die Syntax ist wieder ähnlich wie oben, wichtig ist bei diesem Effect, dass er nur mit dem Schlüsselwort 'new' aufgerufen wird, sonst wird er nicht funktionieren.
new Effect.Highlight('Element', [Optionen]);
Für diesen Effekt gibt es drei spezielle Optionsparameter:
| Parameter | Beschreibung |
|---|---|
| startcolor | Setzt die erste Hintergrundfarbe des Elements, Standard: #ffff99. |
| endcolor | Setzt die Endhintergrundfarbe des Elements. Am besten nimmt man natürlich die originale Hintergrundfarbe des Elements, Standard: #ffffff. |
| restorecolor | Setzt die Hintergrundfarbe des Elements nachdem der Effekt beendet wurde. Der Standardwert ist hierbei die Hintergrundfarbe des Elements vor dem Effect. |
Nun also wieder das obligatorische erste Beispiel:
<html>
<head>
<title>Beispiel 1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
</head>
<body>
<p onmouseover="new Effect.Highlight(this)" style=" background-color:#FF0000;">
Mit der Maus drüberfahren! </p>
</body>
</html>
Beispiel 1 - Highlight mir Grundeinstellung
Vielleicht ist es dir auch selbst aufgefallen, aber dieser Effekt hat einen Fehler: Wenn man schnell hintereinander zwei- oder mehrmals mit der Maus über den Absatz fährt, also den Effekt nochmals ausführt bevor er zu Ende ist, kehrt die Hintergrundfarbe nicht mehr in den Originalzustand zurück.
Wenn wir den Parameter 'restorecolor' benützen, können wir den Fehler allerdings umgehen, auch wenns nicht so toll aussieht. Dazu setzen wir ganz einfach 'restorecolor' auf den Wert unserer Hintergrundfarbe, also '#ff0000':
<p onmouseover="new Effect.Highlight(this, {restorecolor:'#ff0000'})"
style=" background-color:#FF0000;">
Mit der Maus drüberfahren! </p>
Beispiel 2 - Effekt mit 'restorecolor'
(C)Copyright 2007 Thomas Lemmé. Feedback und Fragen auf meinem Blog web/code.
