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ł
Obraz pojawia się po najechaniu kursorem na tekst
- Wyzwalacz - Tytuł
- Zdarzenie - najechanie kursorem
- Obrazy - Zdarzenia wskaźnika - brak
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - najechanie kursorem
- Obrazy - Zdarzenia wskaźnika - brak
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Wybierz dowolny projekt, najedź kursorem na dowolny tytuł
Praca komercyjna
Fotografia portretowa i modowa
Fotografia eventowa
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
2
Najedź kursorem na dowolny tytuł
Obraz pojawia się po najechaniu kursorem na tekst
- Wyzwalacz - Tytuł
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Angielski
Francuski
Deutch
Hiszpański
Włoski
Chiński
Najedź kursorem na dowolną ikonę języka
Przywitaj się w sześciu popularnych językach
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
3
Obraz z tłumaczeniem pojawia się po najechaniu na tekst
- Wyzwalacz - Tytuł języka
- Obrazy - Zdarzenia wskaźnika - brak
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Skala 250; Krycie 100
- Obrazy - Zdarzenia wskaźnika - brak
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Skala 250; Krycie 100
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
START
Z TWOJĄ
ANIMACJA
Z TWOJĄ
ANIMACJA
Ilustracje komercyjne i osobiste
Współpracujemy z klientami z różnych branż, od reklamy i marek po modę i handel detaliczny.
4
Najedź kursorem na dowolną kartę
Białe tło, tytuł i tekst pojawiają się po najechaniu kursorem na obraz.
- Wyzwalacz - Obraz
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100, Przesunięcie Y -50
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100, Przesunięcie Y -50
NOWA MOC W ANIMACJI
5
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
Najedź kursorem na poniższy tekst
Tekst jest podświetlony. Na stronie pojawią się żółte ramki. Pod tekstem wyświetlany jest kształt.
- Wyzwalacz - Kopiowanie tekstu
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
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
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
6
Biała karta z tekstem pojawia się po kliknięciu tytułu
- 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
Podkreślenie pod nagłówkiem pojawia się na stronie
- Wyzwalacz - Kopiowanie tekstu
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
7
Kliknij na A WAVE
Obraz pojawia się po najechaniu kursorem na tekst
- 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
8
Ulice Berlina
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.
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
Kliknij tytuł
Karta pojawia się po kliknięciu tekstu
- 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
Opis znika po kliknięciu na niego, a tytuł
- Wyzwalacz - tytuł i opis
- Zdarzenie - kliknięcie
- Krok 2 - Czas trwania 0,2; Przesuń Y -145; Krycie 0
- Zdarzenie - kliknięcie
- Krok 2 - Czas trwania 0,2; Przesuń Y -145; Krycie 0
RUSZAMY!
Zastępowanie elementów po kliknięciu lub najechaniu kursorem
Najedź kursorem na dowolny przycisk
HOVER ON
ROZPOCZNIJ
Z ANIMACJĄ
Z ANIMACJĄ
PLAY
9
Zastępowanie jednego elementu innym
- Wyzwalacz - Przycisk 2 (górna warstwa)
- Górny obraz - zdarzenia wskaźnika - brak
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
- Górny obraz - zdarzenia wskaźnika - brak
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,1; Krycie 100
Utwórz przewodnik po zawartości strony
Najedź kursorem na dowolną sekcję, aby dowiedzieć się więcej
10
DRZEWA
GRUNT
PTAKI
OWADY
WODA
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 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Ą
Obraz pojawia się po najechaniu kursorem na tytuł
- Wyzwalacz - Tytuł
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,3; Krycie 100
- Zdarzenie - najechanie kursorem
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,3; Krycie 100
Karta z tekstem pojawia się po najechaniu kursorem na tytuł
- Wyzwalacz - Tytuł
- Zdarzenie - najechanie kursorem
- Teksty i kody - Zdarzenia wskaźnika - brak
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,3; Krycie 100; Przesunięcie - 250
- Zdarzenie - najechanie kursorem
- Teksty i kody - Zdarzenia wskaźnika - brak
- Krok 1 - Czas trwania 0; Krycie 0
- Krok 2 - Czas trwania 0,3; Krycie 100; Przesunięcie - 250
Przykład efektu animacji wyzwalanej po najechaniu na elementy
Przykład efektu animacji wyzwalanej po kliknięciu elementów
TO DZIAŁA!
KLIKNIJ TUTAJ
Jak działa animacja wyzwalacza
Dodaj okrąg i przycisk w Zero Block. Wybierz okrąg i otwórz ustawienia Step-by-step animation .
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
Tworzenie niezwykłych stron internetowych przy użyciu step-by-step animation w Zero Block
