Mostrando transiciones de imágenes como fondo con CSS

07-05-2015 - Andrés Cruz

Mostrar transiciones suaves de imágenes en el fondo de una página HTML es realmente sencillo; realizar este tipo de transiciones es una práctica común en la web y en múltiples aplicaciones como Flipboard para Android; en esta entrada veremos una forma simple de realizar estas transiciones.

El truco aquí es emplear imágenes un poco más grandes a la resolución de la pantalla del usuario (monitor, tableta teléfono ,etc); como se te habría podido ocurrir…

Una buena idea

Consiste en emplear los media queries de CSS para seleccionar la imagen que mejor se adapte a la resolución del usuario.

¿Porqué emplear imágenes con mayor resolución de la pantalla?

Al colocar una imagen como fondo con mayor resolución que la pantalla:

Imagen más grande que la pantalla

Parte de la misma no es presentada o no se encuentra oculta, debido a que la pantalla no puede mostrar el total de la imagen; aun así es posible mostrar estas zonas ocultas empleando la propiedad:

background-position 

Dicha propiedad puede recibir hasta dos valores los cuales permite desplazar la imagen en los ejes horizontal:

Y vertical:

Para ello podemos emplear medidas como píxeles, porcentajes o incluso valores no numéricos como:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Por ejemplo:

background-position: right bottom;

Con esto en mente podemos mover fácilmente una imagen de un lado a otro de forma progresiva a través de las animaciones y empleando principalmente la propiedad vista anteriormente:

            @keyframes transitionImage {
                0% {background-position: right bottom;background-image: url('tigre.jpg');opacity:1;}
            20% {background-position: 0 0;opacity:0.5;background-image: url('chita.jpg');}

            30% {}

            35% {opacity:1;}
            50% {background-position:left bottom; opacity:0.5;background-image: url('leon.jpg');}

            60% {}

            65% {opacity:1;}
            80% {background-position:right top; opacity:0.5;background-image: url('tigre.jpg');}

            90% {}

            100% {background-position: right bottom;opacity:1;}
            }

Para simplificar el experimento anterior no emplearemos los media queries aunque pueden ser fácilmente adaptados al CSS presentado anteriormente; es decir, basta con definir el los @keyframes dentro de los media queries; un caso similar al cual aplicamos en la entrada ¿Cómo cubrir todo el fondo con una imagen con CSS?.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 4 días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!