--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje' title: 'Animuj elementy przy przewijaniu, najechaniu i kliknięciu | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:40+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Animuj elementy przy przewijaniu, najechaniu i kliknięciu' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:37:40+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje' articleSection: 'Przewodniki projektowe' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) /[Przewodniki projektowe](/pl/hc/documentation/learn-dxpr-builder/design/overview) # Animuj elementy przy przewijaniu, najechaniu i kliknięciu. Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe ## W tym przewodniku Powiązane przewodniki - [Spraw, aby elementy reagowały na najechanie](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/efekty-hover) - [Nadaj sekcji kolor, zdjęcie albo gradient tła](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/tla) - [Dodawanie układu karuzeli.](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-karuzeli) 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](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/efekty-hover): zmieniaj kolory, cienie albo krycie, gdy wskaźnik spoczywa na elemencie. - [Tła](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/tla): nadaj animowanej sekcji kolor, zdjęcie albo gradient. - [Układ karuzeli](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-karuzeli): odtwarzaj efekty **On trigger** przy każdym otwarciu slajdu.