Activar animación

Ahora, haciendo clic en un elemento, puede lanzar una animación de otro elemento dentro del bloque.
Para probar la animación, abra la página en pantallas de más de 1200px.
HAGA CLIC
EN
Activar animación
Tilda
LA TILDA ZERO BLOCK
Ahora, haciendo clic en un elemento, puede lanzar una animación de otro elemento dentro del bloque.
¡SOBREVUELA!
La tienda oficial en línea de Supreme
Diseño y promoción de la aplicación Music Daily
Sinergia entre Aviro y yo para The Daily Mail
Web y aplicación móvil de City Cycling
El concepto de página web de Darrial
EMPIECE
CON SU ANIMACIÓN
1
Pase el ratón por encima de cualquier título
La imagen aparece al pasar el ratón por encima del texto
- Activador - Título
- Evento - Hover
- Imágenes - 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
Trabajo comercial
Fotografía de retrato y de moda
Fotografía de eventos
EMPIECE
CON SU ANIMACIÓN
2
Pase el ratón por encima de cualquier título
La imagen aparece al pasar el ratón por encima del texto
- Activador - Título
- 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
Pase el ratón por encima de cualquier icono de idioma
Saluda en seis idiomas populares
EMPIECE
CON SU ANIMACIÓN
3
La imagen con traducción aparece al pasar el ratón por encima del texto
- Disparador - Título del idioma
- Imágenes - Puntero Eventos-Ninguno
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Escala 250; Opacidad 100
FOTOGRAFÍA
Ejemplos de fotografía
Un buen portafolio online necesita algo más que imágenes. Sigue nuestros consejos para usar palabras y fotografías que cuenten una historia.
ILUSTRACIÓN
COMIENZA
CON TU
ANIMACIÓN
Ilustración comercial y personal
Trabajamos con clientes de ámbitos que van desde la publicidad y las marcas hasta la moda y el comercio minorista, entre otros.
4
Pase el ratón por encima de cualquier carta
El fondo blanco, el título y el texto aparecen al pasar el ratón por encima de una imagen.
- Activador - Imagen
- 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
EMPIECE
CON SU ANIMACIÓN
Pase el ratón por encima del texto
El texto aparece resaltado. Aparecen recuadros amarillos en la página. Aparece una forma debajo del texto.
- Trigger - Copiar texto
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
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.
Señala y pasa el ratón por encima de la palabra Chemex en el título
EMPIECE
CON SU ANIMACIÓN
6
Al hacer clic en el título aparece una tarjeta blanca con texto
- Trigger - Copia de texto
- Evento - Clic
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
El subrayado bajo el titular aparece en la página
- Trigger - Copia de texto
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
EMPIECE
CON SU ANIMACIÓN
7
Haga clic en UNA ONDA
La imagen aparece al pasar el ratón por encima del texto
- Activador - Título
- Evento - Clic
- Paso 1 - Duración 0.1; Mover Y -100px
- Paso 2 - Duración 0.1; Mover Y - 0
A partir de la segunda forma 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.
EMPIECE
CON SU ANIMACIÓN
Haga clic en el título
La tarjeta aparece al hacer clic en el texto
- Activador - Título y descripción
- Evento - Clic
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.2; Mover Y -417; Opacidad 100
La descripción desaparece al pulsar sobre ella y el título
- Activador - Título y descripción
- Evento - Clic
- Paso 2 - Duración 0.2; Mover Y -145; Opacidad 0
¡VAMOS!
¡VAMOS!
Sustituir elementos al hacer clic o al pasar el ratón por encima
Pase el ratón por encima de cualquier botón
HOVER ON
HOVER ON
JUGAR
EMPIECE
CON SU ANIMACIÓN
JUGAR
9
Sustitución de un elemento por otro
- Disparador - Botón 2 (capa superior)
- Imagen superior - Eventos de puntero-Ninguno
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Crear una guía de contenidos de página
Pase el ratón por encima de cualquier sección para obtener más información
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.
EMPIECE
CON SU ANIMACIÓN
La imagen aparece al pasar el ratón por encima del título
- Activador - Título
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.3; Opacidad 100
Aparece una tarjeta con texto al pasar el ratón por encima del título
- Activador - Título
- Evento - Hover
- Textos y catds - Puntero Eventos-Ninguno
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.3; Opacidad 100; Mover - 250
Ejemplo de efecto de animación al pasar el ratón por encima de los elementos
Ejemplo de efecto de animación al hacer clic en elementos
¡FUNCIONA!
PULSE AQUÍ
Cómo funciona la animación de disparo
Añade un círculo y un botón en Zero Block. Selecciona el círculo y abre los ajustes de Step-by-step animation .
Como EVENTO, seleccione Al hacer clic o Al pasar el ratón por encima.
Haga clic en Añadir disparador en la configuración, y luego en el botón CLIC AQUÍ. Has seleccionado el botón como disparador de animación.
Paso a paso añadir animación. Movemos el círculo amarillo 600px a la derecha al pulsar el botón.
El efecto de animación de activación funciona al hacer clic o al pasar el ratón por encima.
Puedes asignar varias animaciones a un disparador
Puedes asignar varios disparadores a una misma animación
Estudiemos un ejemplo sencillo
Cree sitios web extraordinarios con step-by-step animation en Zero Block
Empezar
Hecho en
Tilda