Contao ScrollCue.Js

scrollCue.js ist eine JavaScript-Bibliothek, die dafür entwickelt wurde, CSS-Animationen zu aktivieren, wenn Elemente beim Scrollen in den Sichtbereich gelangen. Hier sind die wichtigsten Funktionen und Details zur Nutzung:

Wichtige Funktionen:

  1. Animationen: scrollCue.js unterstützt über 15 CSS3-Animationen, darunter fadeIn, slideIn (links, rechts, oben, unten), zoomIn, zoomOut, rotateIn, bounceIn (verschiedene Richtungen) und flipIn (X, Y).
  2. Initialisierung: Um scrollCue.js zu verwenden, füge die CSS- und JavaScript-Dateien in dein HTML-Dokument ein und initialisiere die Bibliothek mit scrollCue.init();.
  3. Attribute: Du kannst verschiedene Datenattribute zu Elementen hinzufügen, um Animationen (data-cue), Animationsgruppen (data-cues) und mehr zu spezifizieren.
  4. Anpassung: Die Bibliothek ermöglicht die Anpassung der Animationsdauer, Verzögerung, Intervall, Reihenfolge und mehr mit zusätzlichen Datenattributen wie data-duration, data-delay, data-interval, data-order und data-sort.
  5. Gruppierung: Elemente können gruppiert werden, sodass Animationen nacheinander oder in einer bestimmten Reihenfolge ausgelöst werden, indem das data-group-Attribut verwendet wird.
  6. Methoden: scrollCue.js bietet Methoden zur Initialisierung (init), Aktualisierung (update) und zum Ein- bzw. Ausschalten (enable) der Animationen programmgesteuert.

scrollCue.js ist einfach zu implementieren und anzupassen, was es zu einer vielseitigen Wahl für das Hinzufügen von scrollgesteuerten Animationen zu Webseiten macht. Weitere Informationen findest du auf der scrollCue.js GitHub-Seite oder in der offiziellen Dokumentation.