Ein "Mouse hover effect" tritt ein, sobald mit der Maus über das betroffene Element gefahren wird (Mouseover).
-Zielelement auswählen (Target element)
Effekt: pulse
Der "Mouse click effect" tritt ein, sobald du mit der Maus auf das betroffene Element klickst.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Default
State after: Default
Effekt: flip
"Animation on mouse enter" tritt ein, sobald die Maus das betroffene Element berührt.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Default
State after: Default
Effekt: bounce
"Animation on mouse leave" tritt ein, sobald die Maus das betroffene Element verlässt.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Default
State after: Default
Effekt: jello
Scroll-Effekte entstehen durch ein Zusammenspiel von 3 Faktoren:
Start- und Endpunkt befinden sich standardmäßig auf der Höhe des Elements, welches vom Effekt betroffen ist. Mit der Option "Offset" kann diese Position jedoch verändert werden.
Der Trigger befindet sich in der Seitenmitte und "läuft" mit dem Scrollbalken mit. Sobald er den Startpunkt übertritt, wird der Effekt ausgelöst.
→ Der Parallax-Effekt besitzt ein alternatives Funktionsprinzip.
Die "Animation on scroll enter (from top)" wird ausgeführt, wenn von oben nach unten gescrollt wird.
Der Start- und Endpunkt befindet sich am oberen Rand des Elements.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Hide Element
State after: Default
Effekt: fadeIn
Die "Animation on scroll enter (from bottom)" wird ausgeführt, wenn von unten nach oben gescrollt wird.
Der Start- und Endpunkt befindet sich am unteren Rand des Elements.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Hide Element
State after: Default
Effekt: fadeIn
Die "Animation on scroll leave (top)" wird ausgeführt, wenn von unten nach oben gescrollt wird.
Anders als beim "on scroll enter (from bottom)" befindet sich der Start- und Endpunkt am oberen Rand des Elements.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Hide Element
State after: Default
Effekt: fadeIn
Die "Animation on scroll leave (bottom)" wird ausgeführt, wenn von oben nach unten gescrollt wird.
Anders als beim "on scroll enter (from top)" befindet sich der Start- und Endpunkt am unteren Rand des Elements.
-Zielelement auswählen (Target element)
-Zustand vor dem Ereignis (state before effect is triggered)
-Zustand nach dem Ereignis (state after effect is triggered)
State before: Hide Element
State after: Default
Effekt: fadeIn
Parallax-Scrolling ist eine spezielle Scroll Technik im Web, die beim Design einer Website verwendet wird, um einen Eindruck von Tiefe zu erzeugen. Die Technik nutzt verschiedene Geschwindigkeiten, mit denen sich Vordergrund und Hintergrundbilder beim Scrollen bewegen, um auf einer Website die Illusion von Dreidimensionalität zu schaffen.
-Zielelement auswählen (Target element)
-Animation start X / Animation end X
-Animation start Y / Animation end Y
Element fährt beim Scrollen über Hintergrund:
1. Die Animation wird auf das Element gesetzt, welches den Hintergrund darstellt.
2. Im Feld "Target Element" wird die ID von dem Vordergrund-Element eingetragen, welches sich beim Scrollen über den Hintergrund bewegt.
3. Animation start X: leer lassen
4. Animation start Y: 0
5. Animation end X: leer lassen
6. Animation end Y: 100%
7. Duration: Height of trigger element
Element tritt während dem Scrollen seitlich ins Bild
1. Die Animation wird direkt auf das Element gesetzt, welches seitlich erscheinen soll.
3. Animation start X: -100%
4. Animation start Y: leer lassen
5. Animation end X: 0
6. Animation end Y: leer lassen
7. Duration: leer lassen
Elemente einer Homepage sind standardmässig statisch: Das heisst, sie verschwinden beim Scrollen.
Der Effekt "Pin element on scrolling" sorgt dafür, dass die betroffenen Elemente sichtbar bleiben und "mitscrollen".
Diese Animation eignet sich gut für "Sticky Navigations"
-Zielelement auswählen (Target element)
In diesem Feld kannst du das Zielelement definieren, an welchem der Effekt angewendet wird.
→ Wenn du keinen Wert hinterlegst, wird das aktuelle Element angesteuert, welches du gerade bearbeitest.
→ Wenn du den Effekt auf ein anderes Element auf der Seite anwenden willst, kannst du dieses via ID ansteuern:
Jedes Element im Pagedesigner besitzt eine eigene ID → Die ID befindet sich in den Styling-Optionen, unterhalb der CSS-Klassen und beginnt mit einem #: → Kopiere die ID des Zielelements in das Feld: |
Mittels dieser Option kannst du definieren, in welchem der 3 Zustände sich das Element befinden soll, bevor der Effekt ausgelöst wird.
Mittels dieser Option kannst du definieren, in welchem der 3 Zustände sich das Element befinden soll, nachdem der Effekt ausgelöst wurde.
Normalerweise befinden sich Start- und Endpunkt auf der Höhe des Elements, welches vom Effekt betroffen ist.
Soll die Animation früher oder später stattfinden, kann mittels "Offset" eine neue Position für Start- und Endpunkt hinterlegt werden.
Die Position wird in Pixeln angegeben:
Standard (auf Höhe des Elements (Bild)) Wert: 250 Wert: -120 |
Start- und Endpunkt der Animation (waagrecht).
Die Werte werden in Pixeln oder Prozent angegeben.
Start- und Endpunkt der Animation (senkrecht).
Die Werte werden in Pixeln oder Prozent angegeben.
Mittels "Druation" kann definiert werden, wann die Animation ausgeführt werden soll:
|