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
Activar animación
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
CON SU ANIMACIÓN
1
Pase el ratón por encima de cualquier título
- Trigger - Title
- Event - Hover
- Images - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Images - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
La imagen aparece al pasar el ratón por encima del texto
Trabajo comercial
Fotografía de retrato y de moda
Fotografía de eventos
Elija cualquier proyecto, pase el ratón por encima de cualquier título
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
2
Pase el ratón por encima de cualquier título
- Trigger - Título
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
La imagen aparece al pasar el ratón por encima del texto
Saluda en seis idiomas populares
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
Pase el ratón por encima de cualquier icono de idioma
Inglés
Francés
Deutch
Español
Italiano
Chino
3
- Trigger - Language title
- Images - Pointer Events-None
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Scale 250; Opacity 100
- Images - Pointer Events-None
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Scale 250; Opacity 100
La imagen con traducción aparece al pasar el ratón por encima del texto
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
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.
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
4
Pase el ratón por encima de cualquier carta
- Trigger - Imagen
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100, Mover Y -50
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100, Mover Y -50
El fondo blanco, el título y el texto aparecen al pasar el ratón por encima de una imagen.
NUEVO PODER EN ANIMACIÓN
5
Pase el ratón por encima del texto
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
- Trigger - Copia de texto
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
El texto aparece resaltado. Aparecen recuadros amarillos en la página. Aparece una forma debajo del texto.
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
6
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
- Trigger - Copia de texto
- Evento - Click
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
- Evento - Click
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Al hacer clic en el título aparece una tarjeta blanca con texto
- Trigger - Copia de texto
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
- Evento - Hover
- 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
7
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
Haga clic en UNA ONDA
- Trigger - Título
- Evento - Click
- Paso 1 - Duración 0,1; Mover Y -100px
- Paso 2 - Duración 0,1; Mover Y - 0
A partir del segundo formulario Retraso 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1,2
- Evento - Click
- Paso 1 - Duración 0,1; Mover Y -100px
- Paso 2 - Duración 0,1; Mover Y - 0
A partir del segundo formulario Retraso 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1,2
La imagen aparece al pasar el ratón por encima del texto
Calles de Berlín
8
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.
Haga clic en el título
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
- Trigger - Título y descripción
- Evento - Click
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.2; Mover Y -417; Opacidad 100
- Evento - Click
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.2; Mover Y -417; Opacidad 100
La tarjeta aparece al hacer clic en el texto
- Trigger - Título y descripción
- Evento - Click
- Paso 2 - Duración 0.2; Mover Y -145; Opacidad 0
- Evento - Click
- Paso 2 - Duración 0.2; Mover Y -145; Opacidad 0
La descripción desaparece al pulsar sobre ella y el título
¡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
JUGAR
EMPIECE
CON SU ANIMACIÓN
CON SU ANIMACIÓN
9
- Trigger - Botón 2 (capa superior)
- Imagen superior - Eventos Puntero-Ninguno
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
- Imagen superior - Eventos Puntero-Ninguno
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.1; Opacidad 100
Sustitución de un elemento por otro
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
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
AGUA
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
CON SU ANIMACIÓN
- Trigger - Título
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.3; Opacidad 100
- Evento - Hover
- Paso 1 - Duración 0; Opacidad 0
- Paso 2 - Duración 0.3; Opacidad 100
La imagen aparece al pasar el ratón por encima del título
- Trigger - Title
- Event - Hover
- Texts and catds - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100; Move - 250
- Event - Hover
- Texts and catds - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100; Move - 250
Aparece una tarjeta con texto al pasar el ratón por encima del título
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
PULSE AQUÍ
¡FUNCIONA!
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
