В
Триггерная анимация
Теперь по клику на один элемент можно запустить анимацию другого элемента в блоке.
Откройте страницу на экранах с разрешением болеее 1200px, чтобы протестировать анимацию.
KLICK MICH!
В
Триггерная анимация
Теперь по клику на один элемент, можно запустить анимацию другого элемента в блоке.
HOVER OVER!
Ein offizieller Supreme-Onlineshop
Music Daily App Design und Werbung
Ich und Aviro sinergy für Daily Mail
Stadtradeln Web und Mobile App
Darrial Website Konzept
КАК ПОВТОРИТЬ АНИМАЦИЮ
1
Наведите курсор на любой из заголовков
- Auslöser - Заголовок
- Ereignis - Hover
- Изображения - Zeiger-Ereignisse - keine
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100
- Ereignis - Hover
- Изображения - Zeiger-Ereignisse - keine
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100
Появление изображения при наведении на текст
Wählen Sie ein beliebiges Projekt, bewegen Sie den Mauszeiger über einen Titel
Arbeit für kommerzielle Marken
Liebesporträts und Modefotografie
Auch Fotos bei Veranstaltungen machen
КАК ПОВТОРИТЬ АНИМАЦИЮ
2
Наведите курсор на любой из заголовков
- Auslöser - Заголовок
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100
Появление изображения при наведении на текст
Englisch
Französisch
Deutch
Spanisch
Italienisch
Chinesisch
Наведите на любой из языков
Скажите приветствие на 6 популярных языках
КАК ПОВТОРИТЬ АНИМАЦИЮ
3
- Auslöser - Заголовок с названием языка
- Ereignis - Schweben
- Изображения - Zeiger-Ereignisse - keine
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Skalierung 250; Deckkraft 100
- Ereignis - Schweben
- Изображения - Zeiger-Ereignisse - keine
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Skalierung 250; Deckkraft 100
Появление изображения с переводом при наведении на текст
FOTOGRAFIE
Fotografie-Koffer
Wir bieten Ihnen viel mehr als nur ein großartiges Schlafzimmer - es gibt eine große Auswahl an Räumen zum Lernen, Trainieren, Entspannen und für soziale Kontakte.
ILLUSTRATION
Kommerzielle und persönliche Illustrationen
Wir bieten Ihnen viel mehr als nur ein großartiges Schlafzimmer - es gibt eine große Auswahl an Räumen zum Lernen, Trainieren, Entspannen und für soziale Kontakte.
КАК ПОВТОРИТЬ АНИМАЦИЮ
4
Наведите курсор на любую из карточек
- Auslöser - изображение
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100, Verschiebung Y -50
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100, Verschiebung Y -50
Появление плашки, заголовка и текста при наведении на изображение
NEUE KRAFT IN DER ANIMATION
5
Наведите курсор на текст
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Auslöser - текст
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Deckkraft 100
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Deckkraft 100
Выделение текста. Появление желтых форм Shape под текстом
Chemex
Die Chemex-Kaffeemaschine ist eine manuelle Glas-Kaffeemaschine, die 1941 von Peter Schlumbohm erfunden und von der Chemex Corporation in Chicopee, Massachusetts, hergestellt wurde. 1958 bezeichneten die Designer des Illinois Institute of Technology die Chemex-Kaffeemaschine als "eines der am besten gestalteten Produkte der Neuzeit", und sie ist Teil der Sammlung des Museum of Modern Art in New York City.
Наведите и кликните на слово Chemex
6
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Auslöser - текст
- Ereignis - Klick
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100
- Ereignis - Klick
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.1; Deckkraft 100
Появление появление белой карточки и текста при клике на заголовок
- Auslöser - текст
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Deckkraft 100
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Deckkraft 100
Появление линии подчеркивания под заголовком
7
КАК ПОВТОРИТЬ АНИМАЦИЮ
Кликните на A WAVE
- Auslöser - Заголовок
- Ereignis - Klick
- Schritt 1 - Dauer 0.1; Verschiebung Y -100px
- Schritt 2 - Dauer 0.1; Verschieben Y - 0
Начиная со второй формы Verzögerung 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
- Ereignis - Klick
- Schritt 1 - Dauer 0.1; Verschiebung Y -100px
- Schritt 2 - Dauer 0.1; Verschieben Y - 0
Начиная со второй формы Verzögerung 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
Появление изображения при наведении на текст
8
Berliner Straßen
Berlin ist die Hauptstadt und sowohl flächen- als auch bevölkerungsmäßig die größte Stadt Deutschlands. Mit 3.748.148 (2018) Einwohnern ist sie nach London die zweitbevölkerungsreichste Stadt der Europäischen Union. Die Stadt ist eines der 16 deutschen Bundesländer. Sie ist vom Land Brandenburg umgeben und grenzt an die brandenburgische Landeshauptstadt Potsdam. Die beiden Städte bilden das Zentrum der Hauptstadtregion Berlin-Brandenburg, die mit rund sechs Millionen Einwohnern und einer Fläche von mehr als 30.000 km² nach dem Rhein-Ruhr- und dem Rhein-Main-Gebiet die drittgrößte Metropolregion Deutschlands ist.
Das Brandenburger Tor ist ein neoklassizistisches Bauwerk aus dem 18. Jahrhundert in Berlin, das im Auftrag des preußischen Königs Friedrich Wilhelm II. nach der erfolgreichen Wiederherstellung der Ordnung während der Batavischen Revolution errichtet wurde.
Süße Teigtaschen, in Fett oder Öl ausgebacken, mit Marmelade gefüllt und mit Puderzucker glasiert. Sie werden auch einfach "Berliner" oder im Osten Deutschlands und in Bayern "Krapfen" genannt.
Deutsch ist die offizielle und vorherrschende gesprochene Sprache in Berlin. Es ist eine westgermanische Sprache, die ihren Wortschatz größtenteils aus dem germanischen Zweig der indoeuropäischen Sprachfamilie bezieht.
Кликните на заголовок
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Auslöser - Заголовок и описание
- Ereignis - Klick
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.2; Verschiebung Y -417; Deckkraft 100
- Ereignis - Klick
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.2; Verschiebung Y -417; Deckkraft 100
Появление карточки при клике на текст
- Auslöser - Заголовок и описание
- Ereignis - Klick
- Schritt 2 - Dauer 0.2; Verschiebung Y -145; Deckkraft 0
- Ereignis - Klick
- Schritt 2 - Dauer 0.2; Verschiebung Y -145; Deckkraft 0
Исчезновение описания при клике на него и заголовок
LOS GEHT'S!
Заменяйте элементы при клике или ховере
Наведите на любую из кнопок
HOVER ON
SPIELEN
КАК ПОВТОРИТЬ АНИМАЦИЮ
9
- Auslöser - Кнопка 2 (на верхнем слое)
- Верхняя кнопка - Zeigerereignisse - keine
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Deckkraft 100
- Верхняя кнопка - Zeigerereignisse - keine
- Ereignis - Hover
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,1; Deckkraft 100
Появление одного элемента на месте другого
Составьте гид по содержанию страницы
Наведите на любой из разделов, чтобы узнать о нем больше
10
BÄUME
BODEN
VÖGEL
INSECTS
WASSER
Insekten oder Insecta sind wirbellose Hexapoden und die größte Gruppe innerhalb des Stammes der Gliederfüßer. Definitionen und Umschreibungen variieren; in der Regel bilden die Insekten eine Klasse innerhalb der Arthropoda.
Einige Vögel, insbesondere Rabenvögel und Papageien, gehören zu den intelligentesten Tieren; mehrere Vogelarten stellen Werkzeuge her und benutzen sie, und viele soziale Arten geben ihr Wissen über Generationen hinweg weiter, was als eine Form von Kultur angesehen wird.
Die Pedosphäre hat Schnittstellen zur Lithosphäre, zur Hydrosphäre, zur Atmosphäre und zur Biosphäre. Der Begriff Pedolith, der allgemein für den Boden verwendet wird, bedeutet übersetzt "gemahlener Stein" im Sinne von "Grundgestein".
In der Botanik ist ein Baum eine mehrjährige Pflanze mit einem länglichen Stamm, der bei den meisten Arten Äste und Blätter trägt. In einigen Verwendungen kann die Definition eines Baumes enger gefasst sein
Wasser ist eine anorganische, transparente, geschmacksneutrale, geruchlose und nahezu farblose chemische Substanz, die der Hauptbestandteil der Hydrosphäre der Erde und der Flüssigkeiten der meisten lebenden Organismen ist.
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Auslöser - Заголовок
- Ereignis - Schweben
- Тексты и карточки - Zeigerereignisse - keine
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,3; Deckkraft 100
- Ereignis - Schweben
- Тексты и карточки - Zeigerereignisse - keine
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0,3; Deckkraft 100
Появление изображения при наведении на название
- Auslöser - Заголовок
- Ereignis - Schweben
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.3; Deckkraft 100; Bewegung - 250
- Ereignis - Schweben
- Schritt 1 - Dauer 0; Deckkraft 0
- Schritt 2 - Dauer 0.3; Deckkraft 100; Bewegung - 250
Появление карточки с текстом при наведении на название
Пример работы Триггерной анимации при наведении на элементы
Пример работы Триггерной анимации при клике на элементы
ES FUNKTIONIERT!
HIER KLICKEN
Как работает триггерная анимация
Добавьте два элемента (круг и кнопку) в Zero Block. Выделите круг и откройте настройки Пошаговой анимации.
В качестве EVENT выберите On Click (по клику) или On Hover (при ховере).
Кликните на Add Trigger в настройках, потом на кнопку CLICK HERE. Вы выбрали кнопку триггерным элементом.
Добавляйте шаги анимации. Мы переместили желтый круг вправо на 600px при клике на кнопку.
Проверка
Триггерная анимация работает при клике или ховере на элементы
На один триггерный элемент можно назначить несколько разных анимаций
Для одной анимации можно назначить несколько разных триггеров
Разберемся на простом примере
