- 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.
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:
- Bild mit optionaler Größen-Funktion
- Bilddarstellung (background-size: auto|cover)
- Horizontale Ausrichtung (background-position-x: 0%|50%|100%)
- Vertikale Ausrichtung (background-position-x: 0%|50%|100%)
- 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.
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:
- Kompletter Umfang von animate.css
- Weitere Bewegungseffekte
- Viewport-Offset (ab welchem Viewport der Effekt starten soll. z.B. Viewport + 50% => Wenn der Artikel in der Mitte des Fensters ist)
- Startposition des Elementes (background-position-x, background-position-y)
- Bewegungs-Effekt (z.B. Bewege Bild von Startposition nach oben/rechts)
- Effekt-Geschwindigkeit (Animation-Duration)
Somit ist es mit diesem Bundle möglich "Bild-Spielereien" und Bewegung auf die Seite zu bringen. :-)