Zero Block: Trigger Animation

Jak skonfigurować animację elementu wyzwalaną przez kliknięcie lub najechanie na inny element?

Pierwsze kroki

Wyzwalacze są częścią animacji krok po kroku. Aby pracować z animacją wyzwalaną, musisz nauczyć się podstaw animacji krok po kroku z tego przewodnika:

Przewodnik po tworzeniu animacji krok po kroku

Aby utworzyć animację wyzwalającą, należy rozpocząć konfigurację animacji krok po kroku. Aby to zrobić, otwórz ustawienia elementu i kliknij Dodaj w sekcji "Animacja krok po kroku".

Zero Block: The "ADD" button under "STEP BY STEP ANIMATION" in the element settings panel on the right.

Wybierz typ zdarzenia, które ma wyzwalać animację. Animacja wyzwalana może działać tylko po najechaniu kursorem lub kliknięciu.

In Zero Block, the "on Click" option in the "EVENT" drop-down list within the "STEP BY STEP ANIMATION" panel on the right.

Kliknij Dodaj wyzwalacz i wybierz element na stronie Zero Block , który ma wyzwalać animację. Animacja rozpocznie się po kliknięciu lub najechaniu na ten element.

Zero Block editor: the "STEP BY STEP ANIMATION" panel with "EVENT" set to "on Click" and a selected button element assigned under "TRIGGER".

Po wybraniu wyzwalacza dodaj kroki animacji. Na przykład, dodaliśmy przesunięcie kształtu o 300px w prawo po kliknięciu przycisku.

Zero Block: Step-by-step animation settings panel on the right, showing an assigned trigger element, animation steps, and step properties.

KLIKNIJ TUTAJ!

Jak przetestować animację wyzwalacza w przeglądarce

Oprócz przycisków "Play Element" i "Play All", Tilda umożliwia podgląd animacji w przeglądarce.

Otwórz dwie karty w przeglądarce -Zero Block i tę samą stronę w trybie podglądu.

W ten sposób można obserwować wszelkie zmiany wprowadzone na stronie Zero Block , wyświetlając ich podgląd na drugiej karcie. Aby zmiany pojawiły się na stronie, odśwież stronę podglądu.

Pierwsze kroki

Część pierwsza

Przejdź do

Projektowanie responsywne