В

Триггерная анимация

Tilda
TILDA ZERO BLOCK
Теперь по клику на один элемент можно запустить анимацию другого элемента в блоке.
Откройте страницу на экранах с разрешением более 1200px, чтобы протестировать анимацию.
HAGA CLIC
В
Триггерная анимация
Tilda
TILDA ZERO BLOCK
Теперь по клику на один элемент, можно запустить анимацию другого элемента в блоке.
НАВЕДИТЕ КУРСОР ИЛИ КЛИКНИТЕ НА ЭЛЕМЕНТЫ, ЧТОБЫ ПОСМОТРЕТЬ РАБОТУ АНИМАЦИИ
¡SOBREVUELA!
Una tienda oficial en línea de Supreme
Diseño y promoción de la aplicación Music Daily
Yo y Aviro sinergia para Daily mail
Web y aplicación móvil de City Cycling
Darrial Concepto de página web
КАК ПОВТОРИТЬ АНИМАЦИЮ
1
Наведите курсор на любой из заголовков
- Activador - Заголовок
- Evento - Hover
- Изображения - Puntero Eventos-Ninguno
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Появление изображения при наведении на текст
Elija cualquier proyecto, pase el ratón por encima de cualquier título
Trabajar para marcas comerciales
Retratos de amor y fotografía de moda
También tomar fotos en eventos
КАК ПОВТОРИТЬ АНИМАЦИЮ
2
Наведите курсор на любой из заголовков
- Activador - Заголовок
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Появление изображения при наведении на текст
Inglés
Francés
Deutch
Español
Italiano
Chino
Наведите на любой из языков
Скажите приветствие на 6 популярных языках
КАК ПОВТОРИТЬ АНИМАЦИЮ
3
- Disparador - Заголовок с названием языка
- Evento - Hover
- Изображения - Puntero Eventos-Ninguno
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Escala 250; Opacidad 100
Появление изображения с переводом при наведении на текст
FOTOGRAFÍA
Casos de fotografía
Te ofrecemos mucho más que una estupenda habitación: hay una gran variedad de espacios para estudiar, hacer ejercicio, relajarse y socializar.
ILUSTRACIÓN
Ilustraciones comerciales y personales
Te ofrecemos mucho más que una estupenda habitación: hay una gran variedad de espacios para estudiar, hacer ejercicio, relajarse y socializar.
КАК ПОВТОРИТЬ АНИМАЦИЮ
4
Наведите курсор на любую из карточек
- Disparador - изображение
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100, Mover Y -50
Появление плашки, заголовка и текста при наведении на изображение
NUEVO PODER EN ANIMACIÓN
5
Наведите курсор на текст
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Activador - текст
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Выделение текста. Появление желтых форм Shape под текстом.
Chemex
La cafetera Chemex es una cafetera manual de vidrio de tipo vertido, inventada por Peter Schlumbohm en 1941 y fabricada por la Chemex Corporation de Chicopee, Massachusetts. En 1958, los diseñadores del Instituto de Tecnología de Illinois afirmaron que la cafetera Chemex es "uno de los productos mejor diseñados de los tiempos modernos" y forma parte de la colección del Museo de Arte Moderno de Nueva York.
Наведите и кликните на слово Chemex
6
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Activador - текст
- Evento - Clic
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Появление появление белой карточки и текста при клике на заголовок
- Trigger - текст
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Появление линии подчеркивания под заголовком
7
КАК ПОВТОРИТЬ АНИМАЦИЮ
Кликните на A WAVE
- Disparador - Заголовок
- Evento - Click
- Paso 1 - Duración 0.1; Mover Y -100px
- Paso 2 - Duración 0.1; Mover Y - 0
Начиная со второй формы Retraso 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
Появление изображения при наведении на текст
8
Calles de Berlín
Berlín es la capital y la ciudad más grande de Alemania tanto por superficie como por población. Sus 3.748.148 (2018) habitantes la convierten en la segunda ciudad propiamente dicha más poblada de la Unión Europea después de Londres. La ciudad es uno de los 16 estados federales de Alemania. Está rodeada por el estado de Brandeburgo, y es contigua a Potsdam, la capital de Brandeburgo. Las dos ciudades están en el centro de la región capital de Berlín-Brandeburgo, que es, con cerca de seis millones de habitantes y una superficie de más de 30.000 km², la tercera región metropolitana más grande de Alemania, después de las regiones del Rin-Ruhr y Rin-Meno.
La Puerta de Brandemburgo es un monumento neoclásico del siglo XVIII en Berlín, construido por orden del rey prusiano Federico Guillermo II tras el exitoso restablecimiento del orden durante la Revolución Bátava.
Albóndigas de masa dulce, fritas en grasa o aceite, rellenas de mermelada y glaseadas con azúcar glas. También se conocen simplemente como "berlinesas" o, en la parte oriental de Alemania y en Baviera, se llaman "Krapfen".
El alemán es la lengua oficial y predominante en Berlín. Es una lengua germánica occidental que deriva la mayor parte de su vocabulario de la rama germánica de la familia de lenguas indoeuropeas.
Кликните на заголовок
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Disparador - Заголовок и описание
- Evento - Clic
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.2; Mover Y -417; Opacidad 100
Появление карточки при клике на текст
- Disparador - Заголовок и описание
- Evento - Clic
- Paso 2 - Duración 0.2; Mover Y -145; Opacidad 0
Исчезновение описания при клике на него и заголовок
¡VAMOS!
¡VAMOS!
Заменяйте элементы при клике или ховере
Наведите на любую из кнопок
HOVER ON
HOVER ON
JUGAR
JUGAR
КАК ПОВТОРИТЬ АНИМАЦИЮ
9
- Disparador - Кнопка 2 (на верхнем слое)
- Верхняя кнопка - Eventos de puntero-Ninguno
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Появление одного элемента на месте другого
Составьте гид по содержанию страницы
Наведите на любой из разделов, чтобы узнать о нем больше
10
ÁRBOLES
SUELO
AVES
INSECTOS
AGUA
Los insectos o Insecta son invertebrados hexápodos y el grupo más numeroso dentro del filo de los artrópodos. Las definiciones y circunscripciones varían; por lo general, los insectos comprenden una clase dentro de los Arthropoda.
Algunas aves, sobre todo córvidos y loros, figuran entre los animales más inteligentes; varias especies de aves fabrican y utilizan herramientas, y muchas especies sociales transmiten conocimientos de generación en generación, lo que se considera una forma de cultura.
La pedosfera interactúa con la litosfera, la hidrosfera, la atmósfera y la biosfera. El término pedolito, utilizado comúnmente para referirse al suelo, se traduce por piedra molida en el sentido de "piedra fundamental".
En botánica, un árbol es una planta perenne con un tallo alargado, o tronco, que sostiene ramas y hojas en la mayoría de las especies. En algunos usos, la definición de árbol puede ser más restringida
El agua es una sustancia química inorgánica, transparente, insípida, inodora y casi incolora, que es el principal constituyente de la hidrosfera terrestre y de los fluidos de la mayoría de los organismos vivos.
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger - Заголовок
- Event - Hover
- Тексты и карточки - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
Появление изображения при наведении на название
- Disparador - Заголовок
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.3; Opacidad 100; Mover - 250
Появление карточки с текстом при наведении на название
Пример работы Триггерной анимации при наведении на элементы
Пример работы Триггерной анимации при клике на элементы
¡FUNCIONA!
PULSE AQUÍ
Как работает триггерная анимация
Добавьте два элемента (круг и кнопку) в Zero Block. Выделите круг и откройте настройки Пошаговой анимации.
В качестве EVENT выберите On Click (по клику) или On Hover (при ховере).
Кликните на Add Trigger в настройках, потом на кнопку CLICK AQUÍ. Вы выбрали кнопку триггерным элементом.
Добавляйте шаги анимации. Мы переместили желтый круг вправо на 600px при клике на кнопку.
Проверка
Триггерная анимация работает при клике или ховере на элементы
На один триггерный элемент можно назначить несколько разных анимаций
Для одной анимации можно назначить несколько разных триггеров
Разберемся на простом примере
¡Создавайте яркие проекты с помощью пошаговой анимации в Tilda Zero Block!
Создать сайт
Hecho en
Tilda