alpdesk/alpdesk-parallax

Parallax for Contao

2.0.1 2025-03-05 06:56 UTC

README

Bundle für Contao um Parallax-Effekte und Animationen zu Artikeln und Inhaltselementen hinzuzufügen

Neu in V 2.x

  • Umstellung auf Twig-Templates
  • KEINE Verwendung von JQuery
  • pures Javascript mit symfony/webpack-encore

Dieses Bundle enthält folgenden Funktionalitäten welche über die Artikel-Einstellungen, ContentElement-Einstellungen und dem Backendmodul "Alpdesk-Animationen" konfiguriert werden.

Artikel-Hintergrundbild mit optionalem Parallax-Effekt (Legend: Parallax-Hintergrundbild)

Es kann ein Bild aus der Dateiverwaltung ausgewählt werden und als normales Hintergrundbild für den Artikel gesetzt werden. Dieses Bild kann dann optional mit einem Parallax-Effekt versehen werden.

Folgende Optionen/Auswahl sind verfügbar:

  1. Bild mit optionaler Größen-Funktion
  2. Bilddarstellung (background-size: auto|cover)
  3. Horizontale Ausrichtung (background-position-x: 0%|50%|100%)
  4. Vertikale Ausrichtung (background-position-x: 0%|50%|100%)
  5. optionaler horizontaler Parallax-Effekt (move left|move right)

Bei aktiviertem Parallax animiert/bewegt das Bundle das Bild dann automatisch in Abhänigkeit von der Scroll-Position und der Bild-Position.

Animations-Effekte

Neben der Hintergrund-Parallax-Funktionalität stehen diverse Bewegungseffekte und ebenso der volle Umfang von Animate.css (V4) zur Verfügung. (see https://animate.style/)

Diese Animationen sind unabhängig vom Parallax-Effekt und werden immer nur einmalig getrigger (auch beim Resize). Die Animationen werden je nach Bedarf über die Artikel-Einstellungen, ContentElement-Einstellungen order dem Backendmodul "Alpdesk-Animationen" konfiguriert.

Folgende Optionen/Auswahl sind verfügbar:

  1. Kompletter Umfang von animate.css
  2. Weitere Bewegungseffekte
  3. Viewport-Offset (ab welchem Viewport der Effekt starten soll. z.B. Viewport + 50% => Wenn der Artikel in der Mitte des Fensters ist)
  4. Startposition des Elementes (background-position-x, background-position-y)
  5. Bewegungs-Effekt (z.B. Bewege Bild von Startposition nach oben/rechts)
  6. Effekt-Geschwindigkeit (Animation-Duration)

Somit ist es mit diesem Bundle möglich "Bild-Spielereien" und Bewegung auf die Seite zu bringen. :-)