Scripaculous TutorialEffekte

Erweiterte Effekte -Combination Effects


Effect.Appear

Lässt ein vorher unsichtbares (das heißt durch die CSS-Angabe 'display:none;' ausgezeichnetes) Element erscheinen. Achtung! Die CSS-Angabe muß dirket im 'style'-Attribut des Elements gemacht werden, sonst funktioniert der Effekt nicht!

Effect.Appear('Element', [{Optionen}]);
	

Element bezwichnet wiederum die ID eines Elements oder das Element selbst. Die optionalen PArameter können folgende sein:

Parameter Beschreibung
duration Dauer des Effekts in Sekunden. Standard:1.0.
from Setzt den Startwert der Deckkraft auf einen Wert zwischen 0.0 und 1.0. Standard: 0.0
to Setzt den Endwert der Deckkraft auf einen Wert zwischen 0.0 und 1.0. Standard: 1.0

Es lassen sich auch alle Parameter des Opacity-Effektes anwenden. Die Anwendung des Effektes ist wieder wie bei den Grundeffekten:

<a href="javascript:void(0)" onclick="new Effect.Appear('appear1');">Anzeigen</a>
<div id="appear1" style="display:none; width:100px; height:100px; background-color:#0000FF;"> Ich bin ein div-Element </div>
Anzeigen

Der Effekt bewirkt also, dass ein Element Angezeigt wird. Das Erscheinen kann man durch die Optionalen Parameter modifizieren:

<a href="javascript:void(0)" 
			onclick="new Effect.Appear('appear2',
				 {duration:3, to:0.5, transition:Effect.Transitions.wobble});">
		Anzeigen
	</a>
<div id="appear2" style="display:none; width:100px; height:100px; background-color:#0000FF;"> Ich bin ein div-Element </div>
Anzeigen

Hier wurden die Parameter 'duration' und 'to' gesetzt bzw. verändert. Das bewirkt in dem Fall, dass das Erscheinen des Elements 3 Sekunden lang dauert und die letztendliche Deckkraft nur 0.5, also 50% beträgt. Außerdem wurde der Übergangsparameter 'transition' auf 'Effect.Transitions.wobble' gesetzt (Siehe auch die Erklärung des 'transition'-Parameters bei den Grundeffekten).

Nach obenNach oben

Effect.Fade

Der Fade-Effekt ist nichts anderes als die Umkehrung des Appear-Effektes. Er blendet ein sichtbares Element aus, indem er die CSS-Eigenschaft display auf 'none' setzt.

Effect.Fade('Element', [{Optionen}]);

Die optionalen Parameter sind wieder die Grundparameter. Also gleich mal ein Beispiel mit verschiedenen Werten:

<a href="#" onclick="new Effect.Fade('divFade1',{duration:3.0, from:1.0});">
		Ausblenden
	</a>
	<div id="divFade1" 
			style="width:100px; height:100px; background-color:#0000FF;">
		Ich bin ein div-Element
	</div>
Ausblenden
Ich bin ein div-Element

Achtung! Wird der 'to'-Parameter auf einen Wert größer 0 gesetzt, macht der Effekt nichts anderes als Effect.Opacity.

Nach obenNach oben

Effect.Puff

Lässt ein Element 'verpuffen' wie eine Seifenblase.

Effect.Puff('Element', {Options});

Auch hier gelten wieder die gleichen optionalen Parameter 'duration', 'from' und 'to'. Und natürlich wieder ein kleines Beispiel zur Veranschaulichung:

<a href="#" onclick="new Effect.Puff('divPuff1',{duration:3.0});">Ausblenden</a>
<div id="divPuff1" style="width:400px; background-color:#0000ff; text-align:center;" > Ich bin ein div-Element </div>
Ausblenden

Ich bin ein div-Element

Besser schaut dieser Effekt aus wenn die Dauer der Standardwert 1 Sekunde oder kürzer ist:

<a href="#" onclick="new Effect.Puff('divPuff2',{duration:0.5});">Ausblenden</a>
<div id="divPuff2" style="width:400px; background-color:#0000ff; text-align:center;" > Ich bin ein div-Element </div>
Ausblenden

Ich bin ein div-Element

Nach obenNach oben

Effect.DropOut

Lässt ein Element gleichzeitig ausblenden und nach unten verschwinden.

Effect.DropOut('Element');

Dieser Effektsieht besser aus, wenn er schnell geschieht:

<a href="#" onclick="new Effect.DropOut('divDropOut1');">Ausblenden</a>
<div id="divDropOut1" style="background-color:#0000ff; width:300px; height:100px; color:#ffffff;" > Ich bin ein div-Element </div>
Ausblenden
Ich bin ein div-Element

Natürlich kann der Effekt auch mit einer längeren Dauer, z.B. 3 Sekunden durchgeführt werden, allerdings verliert er dann 'das gewisse etwas':

<a href="#" onclick="new Effect.DropOut('divDropOut2', {duration:3});">Ausblenden</a>
<div id="divDropOut2" style="background-color:#0000ff; color:#ffffff; width:300px; height:100px;" > Ich bin ein div-Element </div>

Beispiel 2 - mit längerer Dauer

Ausblenden
Ich bin ein div-Element

Nach obenNach oben

Effect.Shake

'Schüttelt' ein Element, indem es öfters links und rechts bewegt wird.

 Effect.Shake('Element');

Und das Beispiel:

<div onclick="new Effect.Shake(this);" 
		style="background-color:#0000ff; color:#ffffff; width:300px; height:100px;" >
			Klicken um mich mal kr&auml;ftig durchzusch&uuml;tteln:) 
</div>
Klicken um mich mal kräftig durchzuschütteln:)

Eine (englische) Anleitung zum modifizieren des Effekts gibts im script.aculo.us-Wiki.

Nach obenNach oben

Effect.SwitchOff

Lässt ein Element ähnlich dem Bild eines Fernsehers beim ausschalten verschwinden.

 Effect.SwitchOff('Element');
	

Das Beispiel:

<a href="#" onclick="new Effect.SwitchOff('divSwitch1');">Ausblenden</a>
<div id="divSwitch1" style="background-color:#0000ff; color:#ffffff; width:300px; height:100px;" > Ich bin ein div-Element </div>

Beispiel - Effect.SwitchOff in der Grundeinstellung

Ausblenden
Ich bin ein div-Element

Nach obenNach oben

Effect.BlindDown, Effect.BlindUp

Der Effekt lässt ein Element von oben herab- bzw. nach oben hinauffahren. Dabei wird allerdings nur der Rahmen des Elements verändert, der Inhalt bleibt auf der eigentlichen Position.

 Effect.BlindDown('Element', {duration:3});
	 Effect.BlindUp('Element', {duration:3});

Das folgende Beispiel enthält beide Effekte - BlindUp und BlindDown:

<a href="javascript:void(0)" onclick="new Effect.BlindUp('divBlind1');">Ausblenden</a> - 
<a href="javascript:void(0)" onclick="new Effect.BlindDown('divBlind1');">Einblenden</a>
<div id="divBlind1" style="border:1px solid #000000; width:300px; height:100px; background-color:#0000FF; color:#FFFFFF;" > Ich bin ein div-Element </div>
Ausblenden - Einblenden
Ich bin ein div-Element

Der Inhalt bleibt stehen...

Nach obenNach oben

Effect.SlideDown, Effect.SlideUp

Dieser Effekt lässt ebenfalls ein Element von oben herab- bzw. nach oben hinauffahren. Der Unterschied zu den Blind-Effekten ist, das sich der Inhalt des Containers mitbewegt.

  Effect.SlideDown('Element', {duration:3});

Das folgende Beispiel enthält wiederum beide Effekte. Zu beachten ist hier, dass ein zusätzliches div-Element nötig ist,das den Content enthält.

<a href="Javascript:void(0);" onclick="new Effect.SlideUp('divSlide1');">Ausblenden</a> - 
<a href="Javascript:void(0);" onclick="new Effect.SlideDown('divSlide1');">Einblenden</a>
<div id="divSlide1" style="border:1px solid #000000; width:300px; height:100px; background-color:#0000FF; color:#FFFFFF;" > <div>Ich bin ein div-Element</div> </div>
Ausblenden - Einblenden
Ich bin ein div-Element

der Inhalt slidet mit...

Achtung! Im Internet Explorer 6 dürfte ein Fehler sein... TODO

Beispiel

Nach obenNach oben

Effect.Pulsate

Lässt ein Element 'pulsieren', das heißt die Deckkraft des Elements öfters hintereinander abschwächen und wieder verstärken.

 Effect.Pulsate('Element', [{Optionen}]);

Dieser Effekt unterstützt folgende optionale Parameter:

Parameter Beschreibung
duration Dauer des Effektes
from Wert der Deckkraft zwischen 0 und 1. Für einen nicht so harten, milderen Übergang einen höheren Parameter wählen.
pulses Bestimmt, wie oft das Element pulsiert

 

Das erste Beispiel zeigt den Effekt mit den Standardparametern:

<a href="Javascript:void(0)" onclick="new Effect.Pulsate('divPulsate1');">Pulsieren</a>
<div id="divPulsate1" style="width:300px; height:100px; background-color:#ff0000;" > <div>Ich bin ein div-Element</div> </div>
Pulsieren
Ich bin ein div-Element

Nach obenNach oben

Effect.Squish

Ein Element verschwindet in der linken oberen Ecke.

Effect.Squish('Element', [{Optionen}]);

Der Effekt mit Standardparametern:

<a href="Javascript:void(0);" onclick="new Effect.Squish('divSquish1');">Verschwinden</a>
<div id="divSquish1" style="width:300px; height:100px; border:1px solid #000; 
			background-color:#0000FF; color:#FFFFFF;" >
	<div>Ich bin ein div-Element</div>
</div>

Zum Beispiel

Verschwinden
Ich bin ein div-Element

Nach obenNach oben

Effect.Fold

Bei diesem Effekt wird das Element zuerst nach oben hin verkleinert, dann nach links. Auch dieser Effekt wird wie gehabt aufgerufen:

Effect.Fold('Element', [{Optionen}]);

Beispiel:

<a href="Javascript:void(0);" onclick="new Effect.Fold('divFold1');">Verschwinden</a>
<div id="divFold1" style="width:300px; height:100px; border:1px solid #000; background-color:#0000FF; color:#FFFFFF;;" > Ich bin ein div </div>

So schaut's aus

Verschwinden
Ich bin ein div

Nach obenNach oben

Effect.Grow, Effect.Shrink

Lässt ein Element von der Mitte aus erscheinen oder verschwinden.

Effect.Grow('Element', [{Optionen}]);

Ein Beispiel:

<a href="Javascript:void(0);" onclick="new Effect.Shrink('divShrink1');">Ausblenden</a> -
<a href="Javascript:void(0);" onclick="new Effect.Grow('divShrink1');">Einblenden</a>
<div id="divShrink1" style="border:1px solid #000000; width:300px; height:100px; background-color:#0000FF; color:#FFFFFF;" > <div>Ich bin ein div-Element</div> </div>

Zum Beispiel

Ausblenden - Einblenden
Ich bin ein div-Element

Nach obenNach oben

 

(C)Copyright 2007 Thomas Lemmé. Feedback und Fragen auf meinem Blog web/code.