nachfolgendes Element: animated fadeInDown slow go
Fullwidth-Elemente & Animationen
CSS-Einbindung mittels jQuery-Skript
Die auf dieser Testseite dargestellten Elemente wurden mittels jQuery mit CSS-Formatierungen versehen. Auf diese Weise wurden einzelne Elemente auf die volle Browserbreite gestreckt oder mit besonderen Hintergründen und mit Animationen versehen.
Das CSS-Skript wird speziell auf die spezifischen Erfordernisse der Seite abgestimmt. Die Auslöser für die jeweilige Darstellung (...der Elemente) folgen dabei immer dem gleichen Prinzip:
- Ein dem Element vorangestelltes html-Widget beinhaltet die Information über CSS-Klassen, die über das jQuery-Skript auf den nachfolgenden Block übertragen werden.
-
Mit Ausnahme der durch das CSS bereitgestellten Hintergrundbilder werden die Klassen durch das Skript erst im Besuchermodus aktiviert, damit die Jimdo-Funktionalität im Bearbeitungsmodus nicht gestört wird.
Dadurch ist es möglich, diese gleich per WYSIWYG richtig zuzuordnen.
Animationen für Jimdo-Standardelemente
Die hier vorgestellten Animationen sind auf alle Jimdo-Standardelemente anwendbar. Es ist auch möglich, verschieden Elemente zu einem Block zusammenzufügen und gemeinsam zu animieren.
Quelle: https://jackonthe.net/css3animateit/examples/
Prinzipiell sind alle Animationen verfügbar, die auf der Beispielseite vorgestellt werden.
Hintergrundbild zweifarbig (fullwidth)
nachfolgendes Element: fullwidth bg-img1 bg-50_
nachfolgendes Element: animated fadeInLeft slow go
Einschweben von links
Dies ist ein Textelement, das mit einer Animation (.fadeInLeft) ausgestattet wurde. Auf die gleiche Weise wurde auch das Bild-Element darunter animiert.
Die Animierten Elemente schweben erst ein, wenn der jeweilige Container ins Blickfeld wandert bzw. gescrollt wird. Daher ensteht ein schöner Verzögerungs-Effekt.
nachfolgendes Element: animated fadeInLeft slow go
nachfolgendes Element: animated fadeInRight slow go
Einschweben von rechts
Dies ist ein Text- und ein Bildelement, welches mit einer Animation (.fadeInRight) ausgestattet wurde.
Die Elemente befinden sich in einem Spaltenelement, welches als fullwidth-Element (...gestreckt über die ganze Browserbreite) angelegt und mit einem zweifarbigen Hintergrundbild (.bg1) versehen wurde.
nachfolgendes Element: animated fadeInRight slow go
Animierte Bildelemente
nachfolgendes Element: animated fadeInLeft slow go
nachfolgendes Element: animated fadeInRight slow go
Jimdo Galerie-Element mit Hintergrundfarbe
Hintergrundbild möglich (...jedoch nicht empfehlenswert, wenn nicht diffus)
nachfolgendes Element: fullwidth bg-color2
Vertikale Galerie, 4 Spalten, Jimdo-Standard-Untertitel
Spaltenelement mit fixem Hintergrundbild (halb-parallax)
Hintergrundfixierung möglich (außer iOS)
nachfolgendes Element: fullwidth bg-img2 parallax-bg
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Spaltenelement mit fixem Hintergrundbild (halb-parallax) und Overlay
Hintergrundfixierung möglich (außer iOS)
nachfolgendes Element: fullwidth bg-img3 parallax-bg
nachfolgendes Element: my-bg bg0
Überschrift h2
Dies ist ein Spaltenelement mit 2 Spalten, bei dem in der zweiten Spalte ein Textelement sowie ein Bildelement eingesetzt wurde.
Die gesamte 2. Spalte wurde bis zur Grenze des Content-Bereichs zusätzlich mit einem halb-transparenten Hintergrund versehen (Element-übergreifend).
ende bg0
Jimdo-Bildelement mit fullwidth
Ohne Inhalt, Hintergrundfixierung leider nicht möglich
nachfolgendes Element: fw-image
Abstand-Element mit fixiertem Hintergrundbild (halb-parallax)
Ohne Inhalt, Hintergrundfixierung möglich (außer iOS)
nachfolgendes Element: fullwidth bg-img3 parallax-bg
Abstand-Element mit Hintergrundbild
Mobile Höhenbeschränkung aufgehoben, Hintergrundfixierung möglich
nachfolgendes Element: fullwidth bg-img4
Spaltenelement mit fixem Hintergrundbild und Formular
Ggf. weitere CSS-Anpassungen erforderlich (z.B. Textfarbe im Formular)
nachfolgendes Element: fullwidth bg-img5 parallax-bg
Jimdo-Standardformular
/* Textfarbe für Formular
------------------------------------------------------------*/
.bg-img5 label,
.bg-img5 label a,
.bg-img5 .cc-m-form-note {
color: white;
}
Overlay-Captions
(...in Bearbeitung, derzeit noch ohne Funktion)
myCaption for next element
Vertikale Galerie, 4 Spalten, Untertitel als overlayCaption
Spaltenelement, 4 Spalten, Bildelemente mit automatischem Untertitel (...aus alt-tag generiert) mit overlayCaption