Ein Kunde wollte eine kleine Spielerei. Es sollte ein Bild und ein Text gemeinsam in einem Blockelement gepflegt werden können. Das Bild sollte wahlweise entweder links oder rechts zu liegen kommen. Auf schmalen Bildschirmen, wenn das Bild die gesamte Breite des Bildschirms einnimmt sollte immer zuerst das Bild und dann der Text erscheinen.
Das Bild sollte mit einer Animation irgendwie ein bisschen animiert werden.
Das Ganze ist ablauffähig in jedem Theme, das mit Bootstrap arbeitet.
Vorgehensweise
- Einen neuen Block-Typ anlegen, mit folgenden Eingabeparametern:
- Bildauswahl-Element
- HTML Textelement (Texteditor)
- Flag, um die Lage des Bildes zu bestimmen
- In der view.php Datei die einzelnen sichtbaren Elemente mit Bootstrap Stilelementen einbetten.
- Eine view.css Datei anlegen und dort die Art der Bild-Animation festlegen.
- Eine view.js Datei anlegen um die Animation starten zu können, sobald der Scroll Balken bedient wird und das Blockelement auf dem Schirm sichtbar wird.
So erscheint das Eingabeformular:
Das gesamte Block Typ Element basiert auf dem Zusammenspiel der 3 Dateien:
Die PHP Datei, in der die Datenbankelemente (Basistypen) von concrete5 (Text und Bild) zu einem einzelnen Element zusammengebaut werden, mit den entsprechenden Namen für die CSS Klassen. Hier werden auch die Spaltenverhältnisse festgelegt. in diesem speziellen Fall 1:1. Text und Bild teilen sich die Spaltenbreite zu gleichen Teilen.
Die CSS Datei, in der die Animation festgelegt wird. In diesem Fall wird das Bild zuerst auf 30% seiner Größe skaliert und sobald es sichtbar wird bläht es sich zu 100% auf.
Es kann jedoch hier auch eine beliebige Animation mit den Mitteln von CSS3/CSS4 festgelegt werden.
Die JS Datei, in der ein Callback festgelegt wird, um die Animation zu triggern. In diesem Fall ist es das Betätigen des Scrollbalkens. Wenn dann das Element in den sichtbaren Bereich rutscht, wird die Animation gestartet.
Das Ganze wurde mit der freundlichen Hilfe von jQuery programmiert.
Auch hier könnte ein anderes Scenario festgelegt werden.
Voraussetzungen sind demnach:
- Bootstrap
- jQuery
Das sollte in den meisten concrete5 Themes gegeben sein.
Und hier das Block-Element zum download:
picture_text.zip