JavaScript-Bibliotheken bei TYPO3

Dieses Skript fügt Ihrer Website einen interaktiven Parallax-Effekt hinzu, der auf die Bewegung des Mauszeigers reagiert. Wenn der Benutzer mit der Maus über das Element #page-wrapper fährt, bewegen sich die darin enthaltenen Elemente mit den Klassen .moves-medium und .moves-slowly relativ zur Mausposition. Die Elemente mit der Klasse .moves-medium haben eine stärkere Bewegung (75 Einheiten), während die Elemente mit der Klasse .moves-slowly sich langsamer bewegen (25 Einheiten). Dieser Effekt wird durch die Verwendung der GSAP-Animationen erreicht und sorgt für ein dynamisches und ansprechendes Benutzererlebnis.

Dieses Skript fügt Ihrer Website einen interaktiven Dreh-Effekt hinzu, der auf die Scrollbewegung des Benutzers reagiert. Wenn der Benutzer auf der Seite scrollt:

• Elemente mit der Klasse .rotation-right drehen sich um 40 Grad nach rechts.
• Elemente mit der Klasse .rotation-left drehen sich um 40 Grad nach links.

Der Dreh-Effekt beginnt, wenn das obere Ende des Elements den unteren Rand des Viewports erreicht und endet, wenn das untere Ende des Elements den oberen Rand des Viewports erreicht. Durch die Verwendung des scrub: true Parameters wird sichergestellt, dass die Drehung flüssig und kontinuierlich ist, basierend auf der Scrollposition des Benutzers. Dies sorgt für ein dynamisches und ansprechendes Benutzererlebnis.

Dieses Skript fügt Ihrer Website einen sanften Einblendeffekt hinzu, der aktiviert wird, wenn bestimmte Elemente beim Scrollen in den Viewport kommen.

• Die Funktion animateFrom bewegt und blendet ein gegebenes Element ein. Das Element wird standardmäßig von unten nach oben verschoben, aber die Richtung kann angepasst werden.
• Die Funktion hide setzt die Sichtbarkeit eines gegebenen Elements auf unsichtbar.
• Wenn das Dokument geladen ist, werden alle Elemente mit der Klasse .fade durchlaufen:
  • Zunächst wird sichergestellt, dass das Element unsichtbar ist.
  • Ein ScrollTrigger wird für jedes dieser Elemente erstellt. Wenn das Element in den Viewport eintritt (onEnter), wird die animateFrom Funktion aufgerufen, um das Element einzublenden.
  • Ein Timeout wird verwendet, um den ScrollTrigger kurz nach dem Initialisieren zu aktualisieren. Dies kann hilfreich sein, um sicherzustellen, dass die Trigger korrekt positioniert sind, besonders wenn andere Skripte oder Styles die Layoutberechnungen beeinflussen könnten.

Durch die Verwendung dieses Skripts werden Elemente mit der Klasse .fade beim Scrollen auf der Seite sanft und stilvoll eingeblendet, was für ein ansprechendes Benutzererlebnis sorgt.

Dieses Skript sorgt dafür, dass die Karte, die in einem iFrame mit der ID mapIframe dargestellt wird, stets responsiv ist. Beim Laden der Seite und bei jeder Änderung der Fenstergröße wird die Breite des iFrames so angepasst, dass sie 90% der gesamten Fensterbreite entspricht. Dies gewährleistet eine optimale Darstellung der Karte auf verschiedenen Bildschirmgrößen und -auflösungen.

Dieses Skript verfeinert das Layout Ihrer Webseite, um ein gleichmäßiges und ästhetisch ansprechendes Erscheinungsbild zu gewährleisten. Es reguliert die Höhe verschiedener Elemente wie .custom-header innerhalb von .custom-row, .card-header und .card-text-top innerhalb von .custom-cards, sodass sie trotz unterschiedlichen Inhalts eine einheitliche Höhe aufweisen. Zusätzlich sorgt es dafür, dass alle Elemente innerhalb von .custom-col-box ein quadratisches Format besitzen. Diese gezielten Anpassungen, die sich über mehrere Klassen erstrecken, tragen zu einem strukturierten und professionellen Design Ihrer Webseite bei.