Layout a la Parallax

Hallo,

ich suche nach einer Möglichkeit die eine Website wie bei http://themes.contao.org/de/preview/parallax.html darzustellen. Ich habe mir mal dieses Theme gekauft, jedoch ist das viel zu kompliziert aufgebaut, um da auch nur Ansatzweise etwas zu verändern. Gibt es eine Möglichkeit, so etwas mit Standarderweiterungen von Contao umzusetzen? Etwa mit der Erweiterung OnePageWebsite und dem bg_strecher für die jeweiligen Seitenhintergrunde, wobei ich nicht genau weiß, ob ich mehrere Hintergründe einfügen kann.
Vielleicht hat schon mal jemand so etwas umgesetzt und kann mir ein paar Beispiele zeigen.

Diese "Transition" Effekte brauche ich nicht unbedingt. Mir geht es nur darum die Seiten untereinander darzustellen und jeweils ein anderes Hintergrundbild über die gesamte Breite einzufügen.

Das ist hier ist nen cooler Ansatz:

https://webflow.com/dashboard/login

Da kannst Du die Seite komplett per Drag & Drop erstellen, vor allem auch so eine Seite, wie Dir es vorschwebt. Musst das ganze dann natürlich ins page Template von Contao reinfrickeln und das css von Contao lahmlegen.

Ich bin mir allerdings nicht sicher, ob das Framework von denen 100%ig auf allen Browsern läuft, deswegen bin ich selber etwas vorsichtig, aber ansonsten supi.

hallo, weiß nicht obs hilft, aber hier ist ne erweiterung in sachen parallax:

https://contao.org/de/extension-list...030009.de.html

manfred

Der Thread-Titel "Parallax" ist falsch gewählt, da es Dir nicht um Parallax-Effekte geht, sondern einfach um mehrere auf einer Seite befindlichen Content-Abschnitte mit jeweils anderem BG-Motiv.

Du wirst auf jeden Fall (sofern Du keine Erweiterung dafür findest) das Contao-CSS-Framework ausklammern müssen, da der wrapper Dir ansonsten alles in der Breite begrenzt (und natürlich musst Du auf rechte bzw. linke Spalten verzichten).

In Folge fügst Du Du Deiner Hauptspalte mehrer Artikel hinzu, welchen Du zur einfachen CSS-Adressierung passende IDs bzw. Klassen mitgibst.

Die Ausgabe sieht dann so aus:

Code:

---

<div id="container">
      <div id="main">
        <div class="inside">
          <div class="mod_article block" id="meineAbschnitt1">
            ##hier fliegen die Contentblöcke rein
          </div>
          <div class="mod_article block" id="meineAbschnitt2">
            ##hier fliegen die Contentblöcke rein
          </div>
        </div>
      </div>
</div>

---

Den einzelnen Artikel-Blöcken weisst Du nun über Deine IDs (oder Klassen) die Backgroundgrafiken zu. Die Contentblöcke musst Du dann noch zentrieren und in der Breite begrenzen (sofern gewünscht). Dazu eignet sich am besten die Contentelmente in ein weiteres DIV o.ä. zu packen. Dieses integrierst Du mittels HTML-Element (oder besser Erweiterung semantic_html).

EDIT: Die oben beschriebene Methode führt zu einem Haufen überflüssiger DIVs (main, inside, ...), nicht unbedingt schlimm, aber sicher nicht optimal. Besser wäre es das fe_page-Template entsprechend anzupassen und überflüssige Strukturen zu entfernen.