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 Imagen más grande que la pantalla](/public/images/example/css/imagen-mas-grande-pantalla.png)
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 Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter