Absätze animieren mit dem jQuery.Cycle Plugin
Cycler-Absatz 
Ab Version 3 des weblica Desktop-CMS steht Ihnen der Cycler-Absatz zur Verfügung.
Weitere Informationen finden Sie in der Online-Hilfe: Cylcler-Absatz.
Weitere Informationen finden Sie in der Online-Hilfe: Cylcler-Absatz.
Mit gezielten Animationen ausgewählter Elemente können Sie Ihre Website für Ihre Besucher noch attraktiver gestalten. Mit Hilfe von jQuery und dem frei verfügbaren Cycle-Plugin können Sie die Absätze einer weblica Seite einfach und flexibel animieren.
Dieser Artikel zeigt, wie das geht. Auf der folgenden Demo-Seite können Sie sich das Ergebnis ansehen und verschiedenen Möglichkeiten live ausprobieren: Demo:Cycle Absätze.
Dieser Artikel zeigt, wie das geht. Auf der folgenden Demo-Seite können Sie sich das Ergebnis ansehen und verschiedenen Möglichkeiten live ausprobieren: Demo:Cycle Absätze.
Hinweis
Im vorliegenden Beispiel verwenden wir ausschliesslich Text-Absätze. Sie können aber ebenso Multimedia-Absätze oder jeden anderen Absatz in weblica verwenden.
Das Cycle-Plugin einbinden
Damit wir unsere Absätze animieren können, benötigen wir neben jQuery das jQuery Cycle-Plugin. Da weblica jQuery auf jeder Seite automatisch einbindet, müssen wir nur dafür sorgen, dass wir das Cycle-Plugin auf der gewünschten Seite einbinden. Am einfachsten geht dies, indem wir das Plugin direkt von der Website des Betreibers laden. Hierzu fügen wir den folgenden Code in den Seiten-Eigenschaften auf der Registerkarte HTML / CSS im Feld HTML-Head ein:
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
Wenn Sie das Cycle-Plugin häufig auf verschiedenen Seiten verwenden möchten, legen Sie für den obigen Code am besten ein eigenes Feld an und verwenden dieses dann jeweils in den Seiten-Eigenschaften. So können Sie die Quelle einfach an einer Stelle ändern, wenn Sie später das Plugin von einem anderen Ort, zum Beispiel direkt aus dem Projekt verwenden möchten.
Seite gestalten: Absätze gruppieren, die Sie animieren möchten
In der Regel sollen mehrere Absätze nacheinander an einer bestimmten Stelle auf einer Seite angezeigt werden. Im Beispiel verwenden wir drei Text-Absätze, die je ein eigenes Absatz-Bild gesetzt haben. Sie können auch Multimedia-Absätze für Bilder nutzen, auch die Kombination von verschiedenen Absatz-Typen ist möglich.
Und so geht's
Legen Sie die gewünschten Absätze auf der Seite an und gestalten Sie diese inhaltlich in der gewohnten Weise. Gruppieren Sie nun diese Absätze, damit das Cycle-Plugin diese Absätze nacheinander mit dem gewählten Effekt anzeigt. Hierzu fügen Sie vor dem ersten und hinter dem letzten Absatz der zu animierenden Absatz-Gruppe je einen HTML-Absatz ein. Das sieht dann im Beispeil so wie auf dem folgenden Bild aus:
Nun brauchen wir noch ein wenig HTML-Code, um die Absatz-Gruppe zu definieren, damit das Cycle-Plugin korrekt arbeitet. Im 1. HTML-Absatz fügen wir hierzu den folgenden Code ein:
<div id="slide" style="overflow: hidden; height: auto;">
Im 2. HTML-Absatz fügen wir dann noch den Code ein, um die Gruppe abzuschliessen:
</div>
Der Trick besteht darin, die zu animierenden Absätze mit Hilfe eines Div-Elements zu gruppieren, damit wir diese dem Cycle-Plugin mitteilen können; hierzu geben wir dem Div eine eindeutige Id, im Beispiel ist dies die Id slide. Sie können natürlich eine beliebige Id verwenden, solange diese eindeutig ist.
Sie haben es schon fast geschafft! Jetzt fehlt nur noch der Code, um das Cycle-Plugin seine Arbeit tun zu lassen. Hierzu fügen Sie wiederum in den Seiten-Eigenschaften auf der Registerkarte HTML / CSS im HTML-Head den folgenden Code ein:
Sie haben es schon fast geschafft! Jetzt fehlt nur noch der Code, um das Cycle-Plugin seine Arbeit tun zu lassen. Hierzu fügen Sie wiederum in den Seiten-Eigenschaften auf der Registerkarte HTML / CSS im HTML-Head den folgenden Code ein:
<script type="text/javascript">
$(document).ready(function() {
// 1.) Seitentitel in den Absatz-Container schieben
$('.textParagraph').each(function() {
var paragraph = $(this);
var heading = $(this).prev();
heading.prependTo(paragraph);
});
// 2.) Alle direkten a-Tags (die Anker) entfernen:
$("#slide > a").remove();
// 3.) Animation starten
$('#slide').cycle({
fx: 'fade',
timeout: 3000,
delay: -2000
});
});
</script>
$(document).ready(function() {
// 1.) Seitentitel in den Absatz-Container schieben
$('.textParagraph').each(function() {
var paragraph = $(this);
var heading = $(this).prev();
heading.prependTo(paragraph);
});
// 2.) Alle direkten a-Tags (die Anker) entfernen:
$("#slide > a").remove();
// 3.) Animation starten
$('#slide').cycle({
fx: 'fade',
timeout: 3000,
delay: -2000
});
});
</script>
Dieser Skript-Code tut drei Dinge:
Punkt 1. und 2. sind nötig, damit das Cycle-Plugin korrekt arbeitet, siehe hierzu die Info-Box Wie das Cycle-Plugin arbeitet.
Interessant sind die Parameter, welche wir der Funktion cycle() mitgeben. Über diese können Sie zum einen den gewünschten Effekt bestimmen, zum anderen Anzeige-Dauer, sowie die Verzögerung:
Das Cycle-Plugin unterstützt noch viele weitere Parameter; weitere Infos finden Sie auf der entsprechenden Options-Seite des Plugins.
Und das war es auch schon! Viel Spass beim Ausprobieren!
- Er verschiebt die Seitentitel jedes Absatzes in den Absatz;
- Entfernt die Anker der Absätze, die das Cycle-Plugin nacheinander anzeigen soll.
- Startet den Code das Cycle-Plugin auf dem Div-Element mit der Id slide.
Punkt 1. und 2. sind nötig, damit das Cycle-Plugin korrekt arbeitet, siehe hierzu die Info-Box Wie das Cycle-Plugin arbeitet.
Interessant sind die Parameter, welche wir der Funktion cycle() mitgeben. Über diese können Sie zum einen den gewünschten Effekt bestimmen, zum anderen Anzeige-Dauer, sowie die Verzögerung:
| Parameter |
Beschreibung |
||
| fx |
Name des Effekts für den Wechsel zwischen den Absätzen, oder durch Komma getrennte Liste. Hier eine Auswahl möglicher Effekte:
|
||
| timeout |
Zeit in Millisekunden zwischen den Wechseln. |
||
| delay | Verzögerung in Millisekunden bis zum Start des ersten Wechsels; kann auch negativ sein. |
Das Cycle-Plugin unterstützt noch viele weitere Parameter; weitere Infos finden Sie auf der entsprechenden Options-Seite des Plugins.
Und das war es auch schon! Viel Spass beim Ausprobieren!
Info-Box: Wie das Cycle-Plugin arbeitet
Die Arbeitsweise des Plugins ist simpel: Es nimmt die Elemente des Containers, auf welchem die cycle()-Funktion aufgerufen wird und zeigt diese Elemente eines nach dem anderen an; in unserem Beispiel ist dies das Div mit der Id slide. Bei den Elementen kann es sich um praktisch alles handeln: ein weiteres Div, ein Bild, ein Link, etc. Das Plugin geht einfach hin und zeigt diese Elemente der Reihe nach mit den gewünschten Übergängen an.
Damit also das Plugin mit den Absätzen von weblica korrekt funktioniert, müssen wir den Inhalt der zu animierenden Container-Struktur anpassen: Zum einen schieben wir den Absatztitel, der unmittelbar vor dem jeweiligen Absatz steht in den Absatz und zum anderen löschen wir das Anker-Element, das weblica für jeden Absatz als mögliches Linkziel generiert.
Übrigens: Wenn Sie weniger schreiben möchten, dann verwenden Sie den folgenden Code, um den Absatztitel zu verschieben:
$('.textParagraph').each(function() {
$(this).prev().prependTo(this);
});
Kompakt und nicht ganz so leserlich!
Damit also das Plugin mit den Absätzen von weblica korrekt funktioniert, müssen wir den Inhalt der zu animierenden Container-Struktur anpassen: Zum einen schieben wir den Absatztitel, der unmittelbar vor dem jeweiligen Absatz steht in den Absatz und zum anderen löschen wir das Anker-Element, das weblica für jeden Absatz als mögliches Linkziel generiert.
Übrigens: Wenn Sie weniger schreiben möchten, dann verwenden Sie den folgenden Code, um den Absatztitel zu verschieben:
$('.textParagraph').each(function() {
$(this).prev().prependTo(this);
});
Kompakt und nicht ganz so leserlich!