Wo wird das konfiguriert?

Die Layout-Auswahl basiert auf einer TypoScript-Konfiguration, die in den Ressourcen der Startseite hinterlegt ist. (TCEFORM.tt_content { layout { addItems {…}}}). Diese Einträge definieren, welche Optionen im Backend für Redakteure im Dropdown-Menü "Layout" bei jedem Inhaltselement sichtbar sind.

Wo finde ich das als Redakteur?

Wenn ein Redakteur ein Inhaltselement bearbeitet (z. B. Text, Bild, Spalte etc.), erscheint im Reiter "Erscheinungsbild" (oder je nach TYPO3-Version auch „Layout“) das Feld "Layout" mit einem Dropdown-Menü. Dort können zusätzliche Layouts und Stilvarianten für das Element ausgewählt werden.

Welche Optionen stehen zur Verfügung?

Im aktuellen Projekt sind folgende Layout-Optionen verfügbar:

 Fließtext Größen:

 Masking:

 Verschiedene Klassen: 

Wo wird das aktiviert?

Die verfügbaren Animationen beim Seitenladen werden über das  pxe_sitepackage eingebunden. Redakteure können diese Animationen direkt im Inhaltselement über das Feld „Animation“ zuweisen.

Wie funktioniert das technisch?

Beim Laden der Seite erhält das gewählte Element automatisch die entsprechende CSS-Klasse. Diese Klasse steuert eine vorbereitete CSS-Animation, die das Element beim Eintritt in die Seite visuell erscheinen lässt (z. B. mit einer Bewegung oder Skalierung).

 Verfügbare Optionen:

  • cols-animated (Die Spalten erscheinen mit einer leichten Verzögerung nacheinander beim Seitenaufruf – typischerweise von unten nach oben)
  • cols-scale (Die Inhalte skalieren leicht hinein, also ein sanfter Zoom-Effekt beim Seitenladen.)
  • margin-top-animated (Das Element rutscht beim Laden sichtbar von oben ins Bild)
     

Hinweis für Redakteure:
Es kann jeweils nur eine dieser Animationen gleichzeitig auf ein Element angewendet werden. Die Animation startet einmalig beim Seitenaufruf.
 

Wo wird das aktiviert?

Die verfügbaren Animationen beim Seitenladen werden über das  pxe_sitepackage eingebunden. Redakteure können diese Animationen direkt im Inhaltselement über das Feld „Animation“ zuweisen.

Wie funktionieren diese Animationen?

Diese Animationen nutzen die JavaScript-Bibliothek GSAP (GreenSock Animation Platform) und deren Plugin ScrollTrigger. Die Effekte werden ausgelöst, sobald ein Element in den sichtbaren Bereich (Viewport) scrollt.

 Verfügbare Scroll-Animationen:

  • fade-in-section (Das Element wird mit einer sanften Aufwärtsbewegung und Transparenz eingeblendet. Effekt: Opacity: 0 → 1, translateY: 150px → 0px)

 

WICHTIG: Einige visuelle Effekte und Interaktionen werden automatisch projektweit per JavaScript aktiviert – ohne dass Redakteure etwas konfigurieren müssen. Diese Skripte sind im Sitepackage enthalten und laufen im Hintergrund bei jeder Seitenladung oder bestimmten Benutzeraktionen.

  • Anpassung des Abstands bei kleinen Bildschirmen (Wenn die Bildschirmbreite kleiner als 992px ist, werden große vertikale Innenabstände (padding: 9rem 0) automatisch reduziert auf 5rem 0)
  • Shariff „Mail“-Button mit dynamischem Link (Beim Klick auf den E-Mail-Button im Social-Sharing-Bereich (.shariff-button.mail) öffnet sich das Standard-Mailprogramm des Nutzers mit dem Betreff und Link zur aktuellen Seite)
  • Blinkender Titel bei Inaktivität (Wenn der Nutzer den Tab verlässt (z. B. zu einem anderen Fenster wechselt), wird der document.title abwechselnd animiert)

Wo wird das aktiviert?

Viele visuelle Effekte im Projekt sind als optionale JavaScript-Funktionen implementiert. Sie werden nur dann aktiv, wenn im Inhaltselement eine bestimmte Klasse im Feld „Extra Class“ eingetragen wird.

Wie funktioniert das?

Sobald ein Element eine der folgenden Klassen hat, wird beim Laden der Seite ein entsprechendes JavaScript ausgelöst – oft auf Basis von GSAP ScrollTrigger oder eigenen Event-Handlern.

  •  btn-flair (Hover-Effekt für Buttons und Links. Ein animierter Farbkreis erscheint unter dem Cursor. Skalierender Farb-Overlay mit sanftem Zoom)
  • scroll-image-up (Das Bild bewegt sich beim Scrollen leicht nach oben (Parallaxeffekt). transform: translateY(-100px) auf Scroll)
  • scroll-image-down (Wie oben, aber das Bild bewegt sich nach unten beim Scrollen. transform: translateY(100px))
  • floating-image (Bild „schwebt“ sanft hoch und runter – auch beim Scrollen leicht skalierend. Dauerhafte Yoyo-Animation + ScrollZoom)
  • chameleon-text (Textfarbe ändert sich beim Scrollen von weiß → grün. Dynamische RGB-Farbinterpolation)
  • horizontal-fullscreen-slide (Horizontales Scrollverhalten mit festen Slides. xPercent-Verschiebung + Scroll-Pinning)
  • vertical-fullscreen-slide (Vertikale Vollbild-Slides, die nacheinander scrollen. ScrollTrigger + pin für jede Sektion)
  • image-slide-in-left / image-slide-in-right (Bilder werden beim Scrollen mit Farbüberblendung von links oder rechts hereingeschoben. GSAP + Maskierung + scale, opacity, translateX)
  • list-of-benefits (Eine visuelle Fortschrittslinie wird animiert zwischen .card-header-Elementen. Step-by-Step Skalierung + animierte Linie)
  • padding-override-big / padding-override-normal (Fügt manuell die Klassen hinzu, werden entsprechende Padding-Stile (Abstände oben/unten) gesetzt. CSS-Änderung über JS für Sektionen mit Inline-Style padding: 15rem 0 oder 10rem 0)
  • text-scramble (Text wird beim Laden zunächst als zufällige Zeichen angezeigt und setzt sich dann nach und nach korrekt zusammen)

 

 

Wo wird das aktiviert?

Das Feld „Extra Class“.

Übersicht verfügbarer SCSS-Klassen:

  • bottom-center (Positioniert ein Element absolut am unteren Rand und zentriert es horizontal)
  • rotation-left, rotation-right (Positioniert dekorative Elemente (z. B. Grafiken) seitlich oben mit absoluter Positionierung. Hinweis: Muss mit rotation.js verwendet werden.)
  • p-relative Fügt dem Element position: relative hinzu
  • .card-wrapper-gradient + .card
  • .list-unstyled

 

 

Diese CSS/SCSS-Regeln gelten projektweit automatisch für bestimmte HTML-Elemente. 

Standardlayout .row / .col:

  • .row hat keinen inneren Margin (override margin-left/right: 0)
  • .col-sm.text-center.first-figure.last-figure wird ohne Seitenabstände dargestellt.

Carousel-Elemente:

  • overflow: hidden, transition: transform
  • Hintergrund-Gradient-Overlay per ::after
  • .carousel-caption startet unsichtbar, rotiert/erscheint beim Aktivieren
  • .active-animation aktiviert sichtbaren Zustand
  • .custom-indicators enthält spezielle Steuerung + Status-Anzeige

Formulare:

  • .form-group, .form-check, .checkbox, .radiobutton mit angepassten Abständen und Typografie
  • Fokuszustände (:focus) haben sichtbaren outline für Barrierefreiheit
  • .felogin-custom gestaltet TYPO3 Login-Formulare

.blockquote, .blockquote-h2:

  • Dekorative Anführungszeichen links oben über ::before
  • Text eingerückt und zentriert