Uno de las grandes adicciones de Cuadri es la posibilidad de crear animaciones basados en valores de
CSS.
Vamos a comentar todo esto para que no nos interfiera en nada.
Ya tienes todo el código y puedes estudiarlo en el futuro.
Qué vamos a poner una pequeña un pequeño selector que diga el logo y MG programas aquí un punto on click.
O sea que cuando demos clic en el logo va a ejecutar esta pequeña función no hemos puesto selector Díaz
y ponemos el método animated y en el método animais le podemos poner una sintaxis similar a CSS.
Abrimos paréntesis y abrimos nuestras llaves.
Comillas width 2.2 comillas 200 píxeles o sea que este logo se va a animar hacia 200 píxeles.
Después de la llave podemos poner una coma y darle una duración 1000 en este caso significa un segundo
5000.
Son cinco segundos y 500 es medio segundo.
Guardarnos cambio si recargamos y vamos a dar click aquí en nuestro logo y vemos esa pequeña animación
así que si puedes crear animaciones en tu sitio web de una forma muy sencilla vamos a crear otro ejemplo
y vamos a ponerle aquí.
Main ãrtico y MG Por qué nuestros árticos estos aquí tienen imágenes le ponemos on Madhouse enter y
esto va a ejecutar una función aumentar imagen y vamos a crear otro que se llame Main ãrtico y M.G.
on mouse Lip y aquí se va a llamar disminuir imagen.
Vamos a crear esas dos funciones primero función aumentar imagen y después función disminuir imagen.
Vamos a empezar con la de aumentar imagen y aquí vamos a ponerle signo de DIS punto Animated.
Abrimos nuestro paréntesis y nuestras llaves y de nuevo comillas UIT-T los puntos.
Comillas 200 píxeles puedes cambiar el valor por el que tu quieras en disminuir imagen.
Y más bien aquí aquí no era de 200 píxeles era 100 por ciento porque la imagen va a crecer 100 por ciento
y puedo copiar esta instrucción pegarla y aquí en vez de 100 por ciento que diga 350 píxeles.
Guardo cambios recargó y me posiciono sobre esta imagen y vemos cómo crece y la hacemos pequeña y vemos
cómo podemos darle un efecto muy especial a nuestros post de nuestro blog.
Realmente sencillo con este tipo de código podemos ver una imagen más grande y luego si no nos interesa
esta noticia salirnos por la siguiente hacer lo mismo ver la imagen.
La verdad es que este efecto me gusta mucho sin embargo no lo he visto muy seguido en muchos sitios
web de darle un preview un poco más grande de una imagen a los usuarios.
Sin embargo pudiste ver todo el poder que hay detrás de animated y algo de CSS.