В
Триггерная анимация
Теперь по клику на один элемент можно запустить анимацию другого элемента в блоке.
Откройте страницу на экранах с разрешением боле 1200px, чтобы протестировать анимацию.
CLICCAMI!
В
Триггерная анимация
Теперь по клику на один элемент, можно запустить анимацию другого элемента в блоке.
SOPRAVVIVERE!
Un negozio online ufficiale Supreme
Progettazione e promozione dell'App Music Daily
Io e Aviro sinergy per il Daily mail
App web e mobile di City Cycling
Concetto di sito web Darrial
КАК ПОВТОРИТЬ АНИМАЦИЮ
1
Наведите курсор на любой из заголовков
- Innesco - Заголовок
- Evento - Passaggio del mouse
- Изображения - Puntatore Eventi-Nessuno
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
- Evento - Passaggio del mouse
- Изображения - Puntatore Eventi-Nessuno
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
Появление изображения при наведении на текст
Scegliere qualsiasi progetto, passare il mouse su qualsiasi titolo
Lavorare per marchi commerciali
Ritratti d'amore e fotografia di moda
Scattare foto anche agli eventi
КАК ПОВТОРИТЬ АНИМАЦИЮ
2
Наведите курсор на любой из заголовков
- Innesco - Заголовок
- Evento - Hover
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
- Evento - Hover
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
Появление изображения при наведении на текст
Inglese
Francese
Deutch
Spagnolo
Italiano
Cinese
Наведите на любой из языков
Скажите приветствие на 6 популярных языках
КАК ПОВТОРИТЬ АНИМАЦИЮ
3
- Innesco - Заголовок с названием языка
- Evento - Passaggio del mouse
- Изображения - Eventi puntatore - Nessuno
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Scala 250; Opacità 100
- Evento - Passaggio del mouse
- Изображения - Eventi puntatore - Nessuno
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Scala 250; Opacità 100
Появление изображения с переводом при наведении на текст
FOTOGRAFIA
Casi di fotografia
Vi offriamo molto di più di una semplice camera da letto: c'è una vasta gamma di spazi per studiare, fare esercizio, rilassarsi e socializzare.
ILLUSTRAZIONE
Illustrazioni commerciali e personali
Vi offriamo molto di più di una semplice camera da letto: c'è una vasta gamma di spazi per studiare, fare esercizio, rilassarsi e socializzare.
КАК ПОВТОРИТЬ АНИМАЦИЮ
4
Наведите курсор на любую из карточек
- Innesco - изображение
- Evento - Hover
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100, Spostamento Y -50
- Evento - Hover
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100, Spostamento Y -50
Появление плашки, заголовка и текста при наведении на изображение
NUOVA POTENZA NELL'ANIMAZIONE
5
Наведите курсор на текст
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Innesco - текст
- Evento - Hover
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
- Evento - Hover
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
Выделение текста. Появление желтых форм Forma под текстом
Chemex
La caffettiera Chemex è una caffettiera manuale in vetro di tipo pour-over, inventata da Peter Schlumbohm nel 1941 e prodotta dalla Chemex Corporation di Chicopee, Massachusetts. Nel 1958, i progettisti dell'Illinois Institute of Technology hanno dichiarato che la caffettiera Chemex è "uno dei prodotti meglio progettati dei tempi moderni" ed è inclusa nella collezione del Museum of Modern Art di New York.
Наведите и кликните на слово Chemex
6
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Innesco - текст
- Evento - Clic
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
- Evento - Clic
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
Появление появление белой карточки и текста при клике на заголовок
- Innesco - текст
- Evento - Hover
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
- Evento - Hover
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
Появление линии подчеркивания под заголовком
7
КАК ПОВТОРИТЬ АНИМАЦИЮ
Кликните на UN'ONDA
- Innesco - Заголовок
- Evento - Fare clic
- Passo 1 - Durata 0,1; Spostamento Y -100px
- Passo 2 - Durata 0,1; Spostamento Y - 0
Начиная со второй формы Ritardo 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
- Evento - Fare clic
- Passo 1 - Durata 0,1; Spostamento Y -100px
- Passo 2 - Durata 0,1; Spostamento Y - 0
Начиная со второй формы Ritardo 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
Появление изображения при наведении на текст
8
Strade di Berlino
Berlino è la capitale e la città più grande della Germania sia per superficie che per popolazione. I suoi 3.748.148 abitanti (2018) la rendono la seconda città più popolosa dell'Unione Europea dopo Londra. La città è uno dei 16 Stati federali della Germania. È circondata dallo Stato del Brandeburgo e contigua a Potsdam, la capitale del Brandeburgo. Le due città sono al centro della regione della capitale Berlino-Brandeburgo che, con circa sei milioni di abitanti e una superficie di oltre 30.000 km², è la terza regione metropolitana più grande della Germania dopo le regioni del Reno-Ruhr e del Reno-Meno.
La Porta di Brandeburgo è un monumento neoclassico del XVIII secolo, costruito a Berlino per ordine del re prussiano Federico Guglielmo II dopo il successo della restaurazione dell'ordine durante la Rivoluzione batava.
Fagottini di pasta dolce, fritti nel grasso o nell'olio, ripieni di marmellata e glassati con zucchero a velo. Sono conosciuti anche come "Berliner" o, nella parte orientale della Germania e in Baviera, sono chiamati "Krapfen".
Il tedesco è la lingua ufficiale e predominante di Berlino. È una lingua germanica occidentale che deriva la maggior parte del suo vocabolario dal ramo germanico della famiglia delle lingue indoeuropee.
Кликните на заголовок
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Innesco - Заголовок и описание
- Evento - Fare clic
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,2; Spostamento Y -417; Opacità 100
- Evento - Fare clic
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,2; Spostamento Y -417; Opacità 100
Появление карточки при клике на текст
- Innesco - Заголовок и описание
- Evento - Fare clic
- Fase 2 - Durata 0,2; Spostamento Y -145; Opacità 0
- Evento - Fare clic
- Fase 2 - Durata 0,2; Spostamento Y -145; Opacità 0
Исчезновение описания при клике на него и заголовок
ANDIAMO!
Заменяйте элементы при клике или ховере
Наведите на любую из кнопок
SPOSTAMENTI SU
GIOCARE
КАК ПОВТОРИТЬ АНИМАЦИЮ
9
- Innesco - Кнопка 2 (на верхнем слое)
- Верхняя кнопка - Eventi del puntatore - Nessuno
- Evento - Passaggio del mouse
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
- Верхняя кнопка - Eventi del puntatore - Nessuno
- Evento - Passaggio del mouse
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,1; Opacità 100
Появление одного элемента на месте другого
Составьте гид по содержанию страницы
Наведите на любой из разделов, чтобы узнать о нем больше
10
ALBERI
TERRA
UCCELLI
INSETTI
ACQUA
Gli insetti o Insecta sono invertebrati esapodi e sono il gruppo più numeroso del phylum degli artropodi. Le definizioni e le circoscrizioni variano; di solito, gli insetti comprendono una classe all'interno degli Arthropoda.
Alcuni uccelli, in particolare i corvidi e i pappagalli, sono tra gli animali più intelligenti; diverse specie di uccelli costruiscono e utilizzano strumenti e molte specie sociali trasmettono le conoscenze attraverso le generazioni, il che è considerato una forma di cultura.
La pedosfera si interfaccia con la litosfera, l'idrosfera, l'atmosfera e la biosfera. Il termine pedolite, usato comunemente per indicare il suolo, si traduce in pietra macinata nel senso di "pietra fondamentale".
In botanica, un albero è una pianta perenne con un fusto allungato, o tronco, che supporta rami e foglie nella maggior parte delle specie. In alcuni usi, la definizione di albero può essere più ristretta.
L'acqua è una sostanza chimica inorganica, trasparente, insapore, inodore e quasi incolore, che è il principale costituente dell'idrosfera terrestre e dei fluidi della maggior parte degli organismi viventi.
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Innesco - Заголовок
- Evento - Hover
- Тексты и карточки - Eventi puntatore-Nessuno
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,3; Opacità 100
- Evento - Hover
- Тексты и карточки - Eventi puntatore-Nessuno
- Passo 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,3; Opacità 100
Появление изображения при наведении название
- Innesco - Заголовок
- Evento - Passaggio del mouse
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,3; Opacità 100; Sposta - 250
- Evento - Passaggio del mouse
- Fase 1 - Durata 0; Opacità 0
- Passo 2 - Durata 0,3; Opacità 100; Sposta - 250
Появление карточки с текстом при наведении название
Пример работы Триггерной анимации при наведении на элементы
Пример работы Триггерной анимаци при клике на элементы
FUNZIONA!
CLICCA QUI
Как работает триггерная анимация
Добавьте два элемента (круг и кнопку) в Zero Block. Выделите круг и откройте настройки Пошаговой анимациии.
В качестве EVENT выберите Al clic (по клику) или Al passaggio (при ховере).
Кликните на Aggiungi trigger в настройках, потом на кнопку CLICCA QUI. Вы выбрали кнопку триггерным элементом.
Добавляйте шаги анимации. Мы переместили желтый круг вправо на 600px при клике на кнопку.
Проверка
Триггерная анимация работает при клике или ховере на элементы
На один тригерный элемент можно назначить несколько разных анимаций
Для одной анимации можно назначить несколько разных триггеров
Разберемся на простом примере
