Animaciones de transición de imágenes

Categorias: ,
Contenidos

Double-click this headline to edit the text.

He encontrado varios ejemplo de como hacer la aniamción de cambios de imagen en esta web:
http://css3.bradshawenterprises.com/cfimg/
Voy a ponerlos en prática para asegurar de que también son compatibles con oxygen

Prueba 1 - cambio de imagen hover

Las imágenes cambiarán cuando se les ponga el ratón encima.

Prueba 2 - cambio de imagen con pulsación de boton

Click me to toggle

Prueba 3 - cambios de imagen con temporizador

Prueba 4 - múltiples imágenes con temporizador

El problema que presenta esta animación es que no es fácil cambiar el tiempo que se quiere para las transiciones.

He probado con alguna otra propuesta para tener imagenes ilimitadas y controlar el tiempo de las transiciones.

https://stackoverflow.com/questions/14313825/multiple-image-cross-fading-in-css-without-java-script

El problema es que el código que me he encontrado es dependiente de la posición absoluta, lo que puede dificultar bastante el diseño de la web y el correcto posicionamiento.
Cuando quitamos el valor absoluto las imágenes se quedan como una seguida, esta forma de animación puede ser interesante para futuros experimentos. He hecho algunos arreglos en el código y añadido variables para poder cambiar parámetros fácilmente.

Y bueno, el problema de las posiciones absolutas no es nada que no se pueda arreglar cambiándolo a posición relativa y usando variables, pero esto tampoco funciona del todo bien, cuando la página pasa a tener menos de 480 pixeles, las imágenes cambian su posición y pasan de estar al lado a una encima de la otra, lo que crea algo raro. La puesición de las imágenes puede verse bien en el ejemplo de arriba.

https://stackoverflow.com/questions/2605889/fading-between-images
My image
https://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
Esto lo he corregido simplemente aumentando el tamaño del div para que los objetos mantengan siempre su posición. Y como lo he hecho en Oxygen he cambiado directamente el tamaño del code block:
advanced > size & spacing > width: 1000px

Prueba 5 - carrusel de imágenes

Podemos usar otro tipo de animaciones para hacer los cambios

Image 1 Image 2 Image 3 Image 4

magnifiercross