alpdesk / alpdesk-parallax
Parallax for Contao
Installs: 2 325
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 2
Open Issues: 3
Type:contao-bundle
Requires
- php: ^8.1
- contao/core-bundle: ^5.3
- symfony/asset: ^6.4 || ^7.0
Requires (Dev)
- contao/conflicts: @dev
- contao/manager-bundle: 5.3.*
- contao/manager-plugin: ^2.0
- phpstan/phpstan: ^2.0
- phpstan/phpstan-phpunit: ^2.0
- phpstan/phpstan-symfony: ^2.0
- phpunit/phpunit: ^9.5
- roave/security-advisories: dev-latest
- slam/phpstan-extensions: ^6.6
- symfony/phpunit-bridge: ^6.4 || ^7.0
Conflicts
- contao/manager-plugin: <2.0 || >=3.0
This package is auto-updated.
Last update: 2025-04-05 07:08:48 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:
- 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.
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:
- 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. :-)