В
Триггерная анимация
клику на один элемент можно запустить анимацию друго элемента в блоке.
Откройте страницу на экранах с разрешением более 1200px, чтобы протестировать анимацию.
CLIQUEZ-MOI !
В
Триггерная анимация
клику на один элемент, можно запустить анимацию друго элемента в блоке.
SURVEILLEZ !
Une boutique en ligne officielle de Supreme
Conception et promotion de l'application Music Daily
Moi et Aviro sinergy pour Daily mail
Application web et mobile City Cycling
Concept du site web de Darrial
КАК ПОВТОРИТЬ АНИМАЦИЮ
1
Наведите курсор на любой из заголовков
- Déclencheur - Заголовок
- Événement - Hover
- Изображения - Pointeur Événements - Aucun
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
- Événement - Hover
- Изображения - Pointeur Événements - Aucun
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
изображения при наведении на текст
Choisissez n'importe quel projet, survolez n'importe quel titre
Travailler pour des marques commerciales
Portraits d'amour et photographie de mode
Prendre également des photos lors d'événements
КАК ПОВТОРИТЬ АНИМАЦИЮ
2
Наведите курсор на любой из заголовков
- Déclencheur - Заголовок
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - durée 0,1 ; opacité 100
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - durée 0,1 ; opacité 100
изображения при наведении на текст
Anglais
Français
Deutch
Espagnol
Italien
Chinois
Наведите на любой из языков
приветствие на 6 популярных языках
КАК ПОВТОРИТЬ АНИМАЦИЮ
3
- Déclencheur - Заголовок с названием языка
- Événement - Hover
- Изображения - Pointer Events-None
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Échelle 250 ; Opacité 100
- Événement - Hover
- Изображения - Pointer Events-None
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Échelle 250 ; Opacité 100
Появление изображения с переводом при наведении на текст
PHOTOGRAPHIE
Mallettes de photographie
Nous vous offrons bien plus qu'une belle chambre : un large éventail d'espaces pour étudier, faire de l'exercice, se détendre et se rencontrer.
ILLUSTRATION
Illustrations commerciales et personnelles
Nous vous offrons bien plus qu'une belle chambre : un large éventail d'espaces pour étudier, faire de l'exercice, se détendre et se rencontrer.
КАК ПОВТОРИТЬ АНИМАЦИЮ
4
Наведите курсор на любую из карточек
- Déclencheur - изображение
- Événement - Hover
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100, Déplacement Y -50
- Événement - Hover
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100, Déplacement Y -50
Появление плашки, заголовка и текста при наведении на изображение
UN NOUVEAU POUVOIR DANS L'ANIMATION
5
Наведите курсор на текст
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Déclencheur - текст
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
Les deux sont en train d'être mis en place, et les deux autres sont en train d'être mis en place. Появление желтых форм Shape под текстом
Chemex
La cafetière Chemex est une cafetière manuelle à bec verseur en verre, inventée par Peter Schlumbohm en 1941 et fabriquée par la Chemex Corporation à Chicopee, dans le Massachusetts. En 1958, des concepteurs de l'Illinois Institute of Technology ont déclaré que la cafetière Chemex était "l'un des produits les mieux conçus des temps modernes" et elle fait partie de la collection du Museum of Modern Art de New York.
Наведите и кликните на слово Chemex
6
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Déclencheur - текст
- Événement - Clic
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
- Événement - Clic
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
Появление появление белой карточки и текста при клике на заголовок
- Déclencheur - текст
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
Появление линии подчеркивания под заголовком
7
КАК ПОВТОРИТЬ АНИМАЦИЮ
Кликните на A WAVE
- Déclencheur - Заголовок
- Événement - Cliquez
- Étape 1 - Durée 0,1 ; Déplacement Y -100px
- Étape 2 - Durée 0,1 ; Déplacement Y - 0
Начиная со второй формы Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
- Événement - Cliquez
- Étape 1 - Durée 0,1 ; Déplacement Y -100px
- Étape 2 - Durée 0,1 ; Déplacement Y - 0
Начиная со второй формы Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
изображения при наведении на текст
8
Les rues de Berlin
Berlin est la capitale et la plus grande ville d'Allemagne en termes de superficie et de population. Ses 3 748 148 habitants (2018) en font la deuxième ville la plus peuplée de l'Union européenne après Londres. La ville est l'un des 16 États fédéraux d'Allemagne. Elle est entourée par l'État du Brandebourg et contiguë à Potsdam, la capitale du Brandebourg. Les deux villes sont au centre de la région de Berlin-Brandebourg, qui est, avec environ six millions d'habitants et une superficie de plus de 30 000 km², la troisième plus grande région métropolitaine d'Allemagne après les régions Rhin-Ruhr et Rhin-Main.
La porte de Brandebourg est un monument néoclassique du XVIIIe siècle situé à Berlin, construit sur ordre du roi de Prusse Frédéric-Guillaume II après le rétablissement réussi de l'ordre pendant la révolution batave.
Boulettes de pâte sucrée, frites dans de la graisse ou de l'huile, fourrées à la confiture et glacées au sucre glace. Elles sont également connues sous le nom de "Berliner" ou, dans la partie orientale de l'Allemagne et en Bavière, elles sont appelées "Krapfen".
L'allemand est la langue officielle et la langue parlée prédominante à Berlin. Il s'agit d'une langue germanique occidentale dont la majeure partie du vocabulaire provient de la branche germanique de la famille des langues indo-européennes.
Кликните на заголовок
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Déclencheur - Заголовок и описание
- Événement - Cliquez
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,2 ; Déplacement Y -417 ; Opacité 100
- Événement - Cliquez
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,2 ; Déplacement Y -417 ; Opacité 100
Появление карточки при клике на текст
- Déclencheur - Заголовок и описание
- Événement - Cliquez
- Étape 2 - Durée 0,2 ; Déplacement Y -145 ; Opacité 0
- Événement - Cliquez
- Étape 2 - Durée 0,2 ; Déplacement Y -145 ; Opacité 0
описания при клике на него и заголовок
ALLONS-Y !
Заменяйте элементы при клике или ховере
Наведите на любую из кнопок
HOVER ON
JOUER
КАК ПОВТОРИТЬ АНИМАЦИЮ
9
- Déclencheur - Кнопка 2 (на верхнем слое)
- Верхняя кнопка - Pointer events-None
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
- Верхняя кнопка - Pointer events-None
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,1 ; Opacité 100
Появление одного элемента на месте другого
Составьте гид по содержанию страницы
Наведите на любой из разделов, чтобы узнать о нем больше
10
ARBRES
TERRAIN
OISEAUX
INSECTES
EAU
Les insectes ou Insecta sont des invertébrés hexapodes et le groupe le plus important de l'embranchement des arthropodes. Les définitions et les circonscriptions varient ; en général, les insectes constituent une classe au sein des Arthropodes.
Certains oiseaux, notamment les corvidés et les perroquets, comptent parmi les animaux les plus intelligents ; plusieurs espèces d'oiseaux fabriquent et utilisent des outils, et de nombreuses espèces sociales transmettent leurs connaissances d'une génération à l'autre, ce qui est considéré comme une forme de culture.
La pédosphère est en interface avec la lithosphère, l'hydrosphère, l'atmosphère et la biosphère. Le terme pédolithe, couramment utilisé pour désigner le sol, se traduit par "pierre moulue" dans le sens de "pierre fondamentale".
En botanique, un arbre est une plante vivace avec une tige allongée, ou tronc, supportant des branches et des feuilles chez la plupart des espèces. Dans certains usages, la définition d'un arbre peut être plus étroite
L'eau est une substance chimique inorganique, transparente, insipide, inodore et presque incolore, qui est le principal constituant de l'hydrosphère terrestre et des fluides de la plupart des organismes vivants.
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger - Заголовок
- Event - Hover
- Тексты и карточки - Pointer Events-None
- Step 1 - Duration 0 ; Opacity 0
- Step 2 - Duration 0.3 ; Opacity 100
- Event - Hover
- Тексты и карточки - Pointer Events-None
- Step 1 - Duration 0 ; Opacity 0
- Step 2 - Duration 0.3 ; Opacity 100
Появление изображения при наведении название
- Déclencheur - Заголовок
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,3 ; Opacité 100 ; Déplacement - 250
- Événement - survol
- Étape 1 - Durée 0 ; Opacité 0
- Étape 2 - Durée 0,3 ; Opacité 100 ; Déplacement - 250
Появление карточки стекстом при наведении название
Пример работы Тригерной анимации при наведении на элементы
Пример работы Тригерной анимации при клике на элементы
ÇA MARCHE !
CLIQUEZ ICI
Как работаетригерная анимация
Добавьте два элемента (круг и кнопку) в Zero Block. Выделите круг и откройте настройки Пошаговой анимации.
В качестве EVENT выберите On Click (по клику) или On Hover (при ховере).
на Add Trigger в настройках, потом на кнопку CLICK HERE. кнопку триггерным элементом.
Les enfants de moins de 18 ans sont plus nombreux que les enfants de moins de 18 ans, et les enfants de moins de 18 ans sont plus nombreux que les enfants de moins de 18 ans. Мы переместили желтый круг вправо на 600px при клике на кнопку.
Проверка
Триггерная анимация работает при клике или ховере на элементы
На один тригерный элемент можно назначить несколько разных анимаций
Для одной анимации можно назначить несколько разных тригеров
Разберемся на простом примере
