Animacja wyzwalacza
Teraz, klikając jeden element, można uruchomić animację innego elementu wewnątrz bloku.
Aby przetestować animację, otwórz stronę na ekranach większych niż 1200px.
KLIKNIJ!
Animacja wyzwalacza
Teraz, klikając jeden element, można uruchomić animację innego elementu wewnątrz bloku.
HOVER OVER!
Oficjalny sklep internetowy Supreme
Projekt i promocja aplikacji Music Daily
Synergia między mną a Aviro dla Daily Mail
Aplikacja internetowa i mobilna City Cycling
Koncepcja strony internetowej Darrial
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
1
Najedź kursorem na dowolny tytuł
- Trigger - Title
- Event - Hover
- Images - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Images - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
Obraz pojawia się po najechaniu kursorem na tekst
Praca komercyjna
Fotografia portretowa i modowa
Fotografia eventowa
Wybierz dowolny projekt, najedź kursorem na dowolny tytuł
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
2
Najedź kursorem na dowolny tytuł
- Trigger - Title
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
Obraz pojawia się po najechaniu kursorem na tekst
Przywitaj się w sześciu popularnych językach
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
Najedź kursorem na dowolną ikonę języka
Angielski
Francuski
Deutch
Hiszpański
Włoski
Chiński
3
- Wyzwalacz - Tytuł języka
- Obrazy - Wskaźnik Zdarzenia - Brak
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Skala 250; Krycie 100
- Obrazy - Wskaźnik Zdarzenia - Brak
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Skala 250; Krycie 100
Obraz z tłumaczeniem pojawia się po najechaniu na tekst
FOTOGRAFIA
Przykłady fotografii
Dobre portfolio online wymaga czegoś więcej niż tylko zdjęć. Postępuj zgodnie z naszymi najlepszymi wskazówkami dotyczącymi używania słów i zdjęć, które opowiadają historię.
ILUSTRACJA
Ilustracje komercyjne i osobiste
Współpracujemy z klientami z różnych branż, od reklamy i marek po modę i handel detaliczny.
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
4
Najedź kursorem na dowolną kartę
- Wyzwalacz - Obraz
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100, Przesunięcie Y -50
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100, Przesunięcie Y -50
Białe tło, tytuł i tekst pojawiają się po najechaniu kursorem na obraz.
NOWA MOC W ANIMACJI
5
Najedź kursorem na poniższy tekst
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
- Wyzwalacz - Kopiowanie tekstu
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Tekst jest podświetlony. Na stronie pojawią się żółte ramki. Pod tekstem wyświetlany jest kształt.
Chemex
Chemex Coffeemaker to ręczny szklany ekspres do kawy typu pour-over, wynaleziony przez Petera Schlumbohma w 1941 roku, produkowany przez Chemex Corporation w Chicopee w stanie Massachusetts. W 1958 roku projektanci z Illinois Institute of Technology stwierdzili, że Chemex Coffeemaker jest "jednym z najlepiej zaprojektowanych produktów współczesnych czasów" i znajduje się w kolekcji Muzeum Sztuki Nowoczesnej w Nowym Jorku.
Wskaż i najedź kursorem na słowo Chemex w tytule
6
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
- Wyzwalacz - Kopiowanie tekstu
- Zdarzenie - Kliknięcie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - Kliknięcie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Biała karta z tekstem pojawia się po kliknięciu tytułu
- Wyzwalacz - Kopiowanie tekstu
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Podkreślenie pod nagłówkiem pojawia się na stronie
7
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
Kliknij na A WAVE
- Wyzwalacz - Tytuł
- Zdarzenie - Kliknięcie
- Krok 1 - Czas trwania 0,1; Przesunięcie Y -100px
- Krok 2 - Czas trwania 0,1; Przesunięcie Y - 0
Począwszy od drugiego formularza Opóźnienie 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1,2
- Zdarzenie - Kliknięcie
- Krok 1 - Czas trwania 0,1; Przesunięcie Y -100px
- Krok 2 - Czas trwania 0,1; Przesunięcie Y - 0
Począwszy od drugiego formularza Opóźnienie 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1,2
Obraz pojawia się po najechaniu kursorem na tekst
Ulice Berlina
8
Berlin jest stolicą i największym miastem Niemiec zarówno pod względem powierzchni, jak i liczby ludności. Jego 3 748 148 (2018) mieszkańców czyni go drugim najbardziej zaludnionym miastem Unii Europejskiej po Londynie. Miasto jest jednym z 16 krajów związkowych Niemiec. Jest otoczone przez kraj związkowy Brandenburgia i sąsiaduje z Poczdamem, stolicą Brandenburgii. Oba miasta znajdują się w centrum regionu stołecznego Berlin-Brandenburgia, który z około sześcioma milionami mieszkańców i powierzchnią ponad 30 000 km² jest trzecim co do wielkości regionem metropolitalnym Niemiec po regionach Ren-Ruhra i Ren-Men.
Brama Brandenburska to XVIII-wieczny neoklasycystyczny pomnik w Berlinie, zbudowany na rozkaz króla Prus Fryderyka Wilhelma II po udanym przywróceniu porządku podczas rewolucji batawskiej.
Słodkie pierogi z ciasta, smażone na tłuszczu lub oleju, nadziewane dżemem i glazurowane cukrem pudrem. Znane również po prostu jako "Berliner" lub, we wschodniej części Niemiec i w Bawarii, nazywane są "Krapfen".
Niemiecki jest oficjalnym i dominującym językiem mówionym w Berlinie. Jest to język zachodniogermański, który wywodzi większość swojego słownictwa z germańskiej gałęzi indoeuropejskiej rodziny językowej.
Kliknij tytuł
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
- Wyzwalacz - Tytuł i opis
- Zdarzenie - Kliknięcie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,2; Przesunięcie Y -417; Krycie 100
- Zdarzenie - Kliknięcie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,2; Przesunięcie Y -417; Krycie 100
Karta pojawia się po kliknięciu tekstu
- Wyzwalacz - Tytuł i opis
- Zdarzenie - Kliknięcie
- Krok 2 - Czas trwania 0,2; Przesunięcie Y -145; Krycie 0
- Zdarzenie - Kliknięcie
- Krok 2 - Czas trwania 0,2; Przesunięcie Y -145; Krycie 0
Opis znika po kliknięciu na niego, a tytuł
RUSZAMY!
Zastępowanie elementów po kliknięciu lub najechaniu kursorem
Najedź kursorem na dowolny przycisk
HOVER ON
PLAY
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
9
- Wyzwalacz - Przycisk 2 (górna warstwa)
- Górny obraz - Zdarzenia wskaźnika - Brak
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Górny obraz - Zdarzenia wskaźnika - Brak
- Zdarzenie - Najechanie
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Zastępowanie jednego elementu innym
Utwórz przewodnik po zawartości strony
Najedź kursorem na dowolną sekcję, aby dowiedzieć się więcej
10
DRZEWA
GRUNT
PTAKI
OWADY
Owady lub Insecta to bezkręgowce sześciopalczaste i największa grupa w obrębie gromady stawonogów. Definicje i opisy są różne; zazwyczaj owady stanowią klasę w obrębie Arthropoda.
Niektóre ptaki, zwłaszcza krukowate i papugi, należą do najbardziej inteligentnych zwierząt; kilka gatunków ptaków wytwarza i używa narzędzi, a wiele gatunków społecznych przekazuje wiedzę z pokolenia na pokolenie, co jest uważane za formę kultury.
Pedosfera łączy się z litosferą, hydrosferą, atmosferą i biosferą. Termin pedolit, powszechnie używany w odniesieniu do gleby, tłumaczy się jako zmielony kamień w znaczeniu "kamień fundamentalny".
W botanice drzewo to roślina wieloletnia z wydłużoną łodygą lub pniem, podtrzymująca gałęzie i liście u większości gatunków. W niektórych zastosowaniach definicja drzewa może być węższa
WODA
Woda jest nieorganiczną, przezroczystą, bezsmakową, bezwonną i prawie bezbarwną substancją chemiczną, która jest głównym składnikiem hydrosfery Ziemi i płynów większości żywych organizmów.
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
- Trigger - Title
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
Obraz pojawia się po najechaniu kursorem na tytuł
- Trigger - Title
- Event - Hover
- Texts and catds - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100; Move - 250
- Event - Hover
- Texts and catds - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100; Move - 250
Karta z tekstem pojawia się po najechaniu kursorem na tytuł
Przykład efektu animacji wyzwalanej po najechaniu na elementy
Przykład efektu animacji wyzwalanej po kliknięciu elementów
KLIKNIJ TUTAJ
TO DZIAŁA!
Jak działa animacja wyzwalacza
Dodaj okrąg i przycisk na stronie Zero Block. Wybierz okrąg i otwórz ustawienia animacji krok po kroku.
Jako ZDARZENIE wybierz opcję Po kliknięciu lub Po najechaniu kursorem.
Kliknij Dodaj wyzwalacz w ustawieniach, a następnie przycisk KLIKNIJ TUTAJ. Wybrałeś przycisk jako wyzwalacz animacji.
Animacja dodawania krok po kroku. Przesunęliśmy żółte kółko o 600px w prawo po kliknięciu przycisku.
Efekt animacji wyzwalacza działa po kliknięciu lub najechaniu kursorem
Do jednego wyzwalacza można przypisać kilka animacji
Do jednej animacji można przypisać kilka wyzwalaczy
Przeanalizujmy prosty przykład
