Animuj elementy przy przewijaniu, najechaniu i kliknięciu.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Sekcję, wiersz albo dowolny element treści możesz wprawić w ruch. Zanikaj nagłówek w górę, gdy wjeżdża w widok, pozwól podążyć za nim chwilę później przyciskowi albo pulsuj ikoną po najechaniu. Każdy z nich ma panel Animation w ustawieniach. Przykład wjeżdża nagłówkiem, potem przyciskiem rejestracji po krótkim opóźnieniu.

Film wjeżdża przyciskiem i nagłówkiem, gdy sekcja pojawia się w widoku.

Wjeżdżanie nagłówka i przycisku

  1. Kliknij Add Elements w pustym obszarze treści i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings.
  3. W HTML classes wybierz Align text center i kliknij Save.
  4. Kliknij + na sekcji i wybierz Button z karty Content. Otworzą się jego ustawienia.
  5. Wpisz Register now w Title i /register w Link.
  6. Otwórz panel Animation i ustaw Animation start na On appear.
  7. Ustaw Animation in na fadeInUp.
  8. W Hidden zaznacz Before in-animation.
  9. Ustaw In-delay na 600 i kliknij Save.
  10. Kliknij ponownie + na sekcji i wybierz Text z karty Content. Wyląduje nad przyciskiem.
  11. Wpisz nagłówek, na przykład Open day 2026, i ustaw go na Heading 2 na pasku narzędzi edytora.
  12. Otwórz panel Animation. Wybierz On appear, fadeInUp i Before in-animation, jak dla przycisku.
  13. Ustaw Duration na 800 i kliknij Save.
  14. Kliknij Save na pasku narzędzi.
  15. Otwórz menu widoku (ikona oka na pasku narzędzi) i wybierz Preview.

Więcej efektów do wypróbowania

  • Pojawianie przy przewijaniu: On appear, fadeInUp, Before in-animation i Duration 800.
  • Karty kaskadowe: ten sam efekt na trzech kartach, z In-delay 0, 200 i 400.
  • Puls uwagi: On appear, pulse, włączone Infinite i Duration 1500.
  • Puls po najechaniu: On hover, pulse i Parent number 0, aby reagował tylko sam element.
  • Pojawianie w karcie: On trigger i fadeIn na elementach wewnątrz karty. Odtwarzają się przy każdym otwarciu karty.

Co widzisz

Gdy zapiszesz tekst, edytor odtwarza oba efekty: nagłówek wjeżdża w 800 milisekund, a przycisk podąża 600 milisekund później. Odwiedzający widzą to samo, gdy sekcja wjeżdża w widok, raz na wczytanie strony. Oba pozostają niewidoczne do startu efektu, ponieważ zaznaczono Before in-animation.

Ustawienia

Ustawienie Do czego służy Domyślnie
Animation start Kiedy efekt się odtwarza: On appear (wjechanie w widok), On hover, On click albo On trigger (gdy otwiera się slajd karuzeli, karta albo przełącznik z elementem) No animation
Animation in Efekt wejścia: wygaszanie, wsuwanie, powiększanie, obroty i efekty uwagi, takie jak bounce, pulse i shake No animation
Animation out Efekt wyjścia, z tej samej listy. Pokazuje się tylko dla On hover i On trigger. No animation
Hidden Before in-animation trzyma element niewidocznym do odtworzenia efektu. After in-animation ukrywa go po zakończeniu efektu. Żadne
Infinite Powtarza efekt bez końca Wyłączone
Appear boundary Dla On appear: jak daleko pod ekranem startuje efekt, w procentach wysokości ekranu. 0 startuje go, gdy element wjeżdża w widok; 100 startuje go o jedną wysokość ekranu wcześniej. 100
Duration Długość efektu, od 0 do 3000 milisekund 1000
In-delay Oczekiwanie przed odtworzeniem wejścia, do 10000 milisekund 0
Out-delay Oczekiwanie przed odtworzeniem wyjścia, do 10000 milisekund 0
Parent number Dla On hover i On click: na który element odwiedzający wskazuje albo klika. 0 to sam element, 1 jego rodzic, 2 rodzic rodzica. 1

Kolumny nie mają panelu Animation. Nie mają go też pojedyncze karty, przełączniki i slajdy wewnątrz elementów układu. Animuj zamiast tego element wewnątrz nich.

Jeśli nie widzisz animacji

  • Element nigdy się nie pojawia. Before in-animation ukrywa go do odtworzenia efektu, ale Animation in to No animation. Wybierz efekt w Animation in.
  • Efekt odtworzył się raz i stanął. On appear odtwarza się raz na wczytanie strony. Przeładuj stronę, aby zobaczyć go ponownie, albo włącz Infinite dla powtarzającego się efektu.
  • Efekt startuje, zanim odwiedzający dotrze do elementu. Appear boundary jest wysokie: przy 100 efekt startuje o jedną wysokość ekranu przed wjechaniem elementu w widok. Ustaw 0 w panelu Animation.
  • Najechanie w pobliżu elementu startuje efekt. Parent number to 1, więc rodzic nasłuchuje wskaźnika. Ustaw Parent number na 0.

Co dalej?

  • Efekty najechania: zmieniaj kolory, cienie albo krycie, gdy wskaźnik spoczywa na elemencie.
  • Tła: nadaj animowanej sekcji kolor, zdjęcie albo gradient.
  • Układ karuzeli: odtwarzaj efekty On trigger przy każdym otwarciu slajdu.