Aufmacher animieren mit dem jQuery.Cycle Plugin
Der Artikel Absätze animieren mit dem jQuery.Cycle Plugin erklärt, wie Sie die Absätze einer weblica Seite einfach und flexibel animieren und zwar mit Hilfe von jQuery und dem frei verfügbaren Cycle-Plugin.
Dieser Artikel zeigt, wie Sie das Cycle-Plugin nutzen, um die einzelnen Beiträge eines Aufmachers nacheinander mit einer Animation anzuzeigen. Auf der folgenden Demo-Seite können Sie sich das Ergebnis ansehen und verschiedenen Möglichkeiten live ausprobieren: Demo: Aufmacher animieren
Dieser Artikel zeigt, wie Sie das Cycle-Plugin nutzen, um die einzelnen Beiträge eines Aufmachers nacheinander mit einer Animation anzuzeigen. Auf der folgenden Demo-Seite können Sie sich das Ergebnis ansehen und verschiedenen Möglichkeiten live ausprobieren: Demo: Aufmacher animieren
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.
Den Aufmacher einbinden
Platzieren Sie den Aufmacher, den Sie animieren möchten, wie gewohnt auf Ihrer Seite und legen Sie die Quelle, Sortierung, den Stil, etc. fest. Ergänzen Sie dann in den Absatz-Eigenschaften des Aufmachers die CSS-Klasse CSS-Klasse slideTeaser. Wir benötigen diese, um die Darstellung durch das Cycle-Plugin steuern zu können. Weitere Infos zum hinterlegen eigener CSS-Klassen finden Sie im Artikel Eigene CSS-Klassen für Absätze verwenden.
Die CSS-Klasse slideTeaser
Damit die Anzeige durch das Cycle-Plugin korrekt ist, müssen wir den Aufmacher mit etwas CSS vorbereiten. Hierzu dient die CSS-Klasse slideTeaser. Sie können auch einen anderen Klassennamen verwenden, achten Sie einfach darauf , dass Sie überall den korrekten Klassennamen verwenden.
Hinterlegen Sie den nachstehenden CSS-Code entweder in den Seiten-Eigenschaften oder als globalen CSS-Code; siehe hierzu auch den Artikel Eigenen CSS-Code für ein Projekt hinterlegen:
Hinterlegen Sie den nachstehenden CSS-Code entweder in den Seiten-Eigenschaften oder als globalen CSS-Code; siehe hierzu auch den Artikel Eigenen CSS-Code für ein Projekt hinterlegen:
.slideTeaser {
position: relative;
overflow: hidden;
height: 100px;
}
position: relative;
overflow: hidden;
height: 100px;
}
Dieser CSS-Code sorgt dafür, dass die Darstellung durch das Cylce-Plugin korrekt erfolgt:
- Der Absatz wird innerhalb der Seite relativ positioniert
- Überfliessender Inhalt wird verborgen, damit die Animation nicht über die Seitenränder fliesst
- Der Absatz bekommt eine Höhe, damit evtl. nachfolgender Inhalt nicht verschwindet.
Die Angabe einer Höhe ist zwingend
Bei der Angabe der Höhe müssen Sie möglicherweise ein bisschen ausprobieren, welcher Wert passt. Die Höhenangabe ist nötig, weil das Cycle-Plugin für die Animation die Positionierung der einzelnen Aufmacher-Beiträge dynamisch anpasst und dadurch die automatische Höhenberechnung im Browser nicht mehr richtig arbeitet.
Die Beiträge animieren
Das Cycle-Plugin soll nun die einzelnen Aufmacher-Beiträge nacheinander mit dem gewünschten Effekt anzeigen. Hierzu muss das Plugin natürlich wissen, welchen Absatz es animieren soll. 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() {
$('.slideTeaser table tbody').cycle({
fx: 'scrollHorz',
timeout: '1500',
delay: '-3000',
synch: true,
pause: true
});
});
</script>
$(document).ready(function() {
$('.slideTeaser table tbody').cycle({
fx: 'scrollHorz',
timeout: '1500',
delay: '-3000',
synch: true,
pause: true
});
});
</script>
Dieser Skript-Code startet den Code das Cycle-Plugin für die einzelnen Aufmacher-Beiträge und zwar für Absätze mit der Klasse slideTeaser.
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.
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. | ||
| pause | true oder false: Der Wert true sorgt dafür, dass die Animation anhält, sobald der Webseiten-Besucher seine Maus auf einen Beitrag bewegt. |
Das Cycle-Plugin unterstützt noch viele weitere Parameter; weitere Infos finden Sie auf der entsprechenden Options-Seite des Plugins.
Die Animation für einen bestimmten Aufmacher-Absatz konfigurieren
Die beschriebene Lösung arbeitet auf der Basis einer CSS-Klasse. Damit können Aufmacher alleine durch die Zuordnung der Klasse zum jeweiligen Aufmacher-Absatz animiert werden.
Wenn Sie mehrere Aufmacher in der beschriebenen Weise animieren möchten und dabei unterschiedliche Höhen-Angaben bzw. unterschiedliche Effekte für die Animation benutzen wollen, dann verwenden Sie anstelle der CSS-Klasse die Id des gewünschten Aufmacher-Absatzes wie folgt:
Wenn Sie mehrere Aufmacher in der beschriebenen Weise animieren möchten und dabei unterschiedliche Höhen-Angaben bzw. unterschiedliche Effekte für die Animation benutzen wollen, dann verwenden Sie anstelle der CSS-Klasse die Id des gewünschten Aufmacher-Absatzes wie folgt:
Die Höhe absatz-spezifisch setzen
Verwenden Sie für die Höhenangabe nicht die Klasse (im Beispiel slideTeaser) sondern die Id des Absatzes:
#pa808 {
height: 100px;
}
height: 100px;
}
Einen bestimmten Aufmacher-Absatz animieren
Im Code für die Animation verwenden Sie dann ebenfalls die Id des gewünschten Aufmacher Absatzes:
<script type="text/javascript">
$(document).ready(function() {
$('#pa808 table tbody').cycle({
fx: 'scrollHorz',
timeout: '1500',
delay: '-3000',
synch: true,
pause: true
});
});
</script>
$(document).ready(function() {
$('#pa808 table tbody').cycle({
fx: 'scrollHorz',
timeout: '1500',
delay: '-3000',
synch: true,
pause: true
});
});
</script>
Die entpsrechende Id finden Sie in den Absatz-Eigenschaften des Absatzes auf der Registerkarte CSS/HTML, siehe hierzu auch den Artikel Eigene CSS-Klassen für Absätze verwenden.