Elemente bei Scroll, Hover oder Klick animieren.

DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden

Sie können einen Abschnitt, eine Zeile oder jedes Inhaltselement bewegen. Blenden Sie eine Überschrift beim Scrollen ins Bild von unten ein, lassen Sie eine Schaltfläche einen Moment später folgen, oder lassen Sie ein Icon bei Hover pulsieren. Jedes hat ein Panel Animation in seinen Einstellungen. Das Beispiel blendet eine Überschrift ein, dann eine Anmeldeschaltfläche nach kurzer Verzögerung.

Das Video blendet eine Schaltfläche und eine Überschrift ein, während der Abschnitt ins Bild kommt.

Überschrift und Schaltfläche einblenden

  1. Klicken Sie im leeren Inhaltsbereich auf Add Elements und wählen Sie Section im Tab Layout.
  2. Zeigen Sie auf den Abschnitt und öffnen Sie More > Settings.
  3. Wählen Sie unter HTML classes die Option Align text center und klicken Sie auf Save.
  4. Klicken Sie auf + am Abschnitt und wählen Sie Button im Tab Content. Seine Einstellungen öffnen sich.
  5. Tippen Sie Register now in Title und /register in Link.
  6. Öffnen Sie das Panel Animation und setzen Sie Animation start auf On appear.
  7. Setzen Sie Animation in auf fadeInUp.
  8. Aktivieren Sie unter Hidden die Option Before in-animation.
  9. Setzen Sie In-delay auf 600 und klicken Sie auf Save.
  10. Klicken Sie erneut auf + am Abschnitt und wählen Sie Text im Tab Content. Es landet über der Schaltfläche.
  11. Tippen Sie eine Überschrift, etwa Open day 2026, und setzen Sie sie in der Editor-Symbolleiste auf Heading 2.
  12. Öffnen Sie das Panel Animation. Wählen Sie On appear, fadeInUp und Before in-animation, wie bei der Schaltfläche.
  13. Setzen Sie Duration auf 800 und klicken Sie auf Save.
  14. Klicken Sie in der Symbolleiste auf Save.
  15. Öffnen Sie das Ansichtsmenü (das Augensymbol in der Symbolleiste) und wählen Sie Preview.

Weitere Effekte zum Ausprobieren

  • Scroll-Einblendung: On appear, fadeInUp, Before in-animation und eine Duration von 800.
  • Gestaffelte Karten: derselbe Effekt auf drei Karten, mit In-delay von 0, 200 und 400.
  • Aufmerksamkeitspuls: On appear, pulse, Infinite an und eine Duration von 1500.
  • Hover-Puls: On hover, pulse und eine Parent number von 0, damit nur das Element selbst reagiert.
  • Tab-Einblendung: On trigger und fadeIn auf den Elementen in einem Tab. Sie spielen bei jedem Öffnen des Tabs.

Was Sie sehen

Wenn Sie den Text speichern, spielt der Editor beide Effekte: Die Überschrift blendet sich über 800 Millisekunden von unten ein und die Schaltfläche folgt 600 Millisekunden später. Besucher sehen dasselbe, während der Abschnitt ins Bild scrollt, einmal pro Seitenaufruf. Beide bleiben unsichtbar, bis ihr Effekt startet, weil Before in-animation aktiviert ist.

Settings

Einstellung Was sie bewirkt Standard
Animation start Wann der Effekt spielt: On appear (ins Bild gescrollt), On hover, On click oder On trigger (wenn die Karussellfolie, der Tab oder der Toggle, der das Element hält, öffnet) No animation
Animation in Der Eingangseffekt: Einblendungen, Slides, Zooms, Flips und Aufmerksamkeitseffekte wie Bounce, Pulse und Shake No animation
Animation out Der Ausgangseffekt, aus derselben Liste. Erscheint nur für On hover und On trigger. No animation
Hidden Before in-animation hält das Element unsichtbar, bis sein Effekt spielt. After in-animation verbirgt es, sobald der Effekt endet. Keins
Infinite Wiederholt den Effekt ohne Ende Aus
Appear boundary Für On appear: wie weit unter dem Bildschirm der Effekt startet, in Prozent der Bildschirmhöhe. 0 startet ihn, während das Element ins Bild scrollt; 100 startet ihn eine Bildschirmhöhe früher. 100
Duration Länge des Effekts, 0 bis 3000 Millisekunden 1000
In-delay Warten, bevor der Eingang spielt, bis 10000 Millisekunden 0
Out-delay Warten, bevor der Ausgang spielt, bis 10000 Millisekunden 0
Parent number Für On hover und On click: auf welches Element Besuchende zeigen oder klicken. 0 ist das Element selbst, 1 sein Elternelement, 2 dessen Elternelement. 1

Spalten haben kein Panel Animation. Auch nicht die einzelnen Tabs, Toggles und Folien in Layout-Elementen. Animieren Sie stattdessen das Element darin.

Wenn Sie die Animation nicht sehen

  • Das Element erscheint nie. Before in-animation verbirgt es, bis sein Effekt spielt, aber Animation in ist No animation. Wählen Sie einen Effekt in Animation in.
  • Der Effekt spielte einmal und stoppte. On appear spielt einmal pro Seitenaufruf. Laden Sie die Seite neu, um ihn erneut zu sehen, oder schalten Sie Infinite für einen sich wiederholenden Effekt ein.
  • Der Effekt startet, bevor Besuchende das Element erreichen. Appear boundary ist hoch: Bei 100 startet der Effekt eine Bildschirmhöhe, bevor das Element ins Bild scrollt. Setzen Sie es im Panel Animation auf 0.
  • Zeigen in Elementnähe startet den Effekt. Parent number ist 1, daher hört das Elternelement auf den Zeiger. Setzen Sie Parent number auf 0.

Wie geht es weiter?

  • Hover-Effekte: Farben, Schatten oder Deckkraft ändern, während der Zeiger auf einem Element ruht.
  • Hintergründe: dem animierten Abschnitt Farbe, Foto oder Verlauf geben.
  • Karussell-Layout: On trigger-Effekte bei jedem Öffnen einer Folie spielen.