El proyecto de hoy es otra exploración de los tipos de aplicaciones prácticas que puede lograr con un poco de ingenio y algo de CSS bastante básico. Se sorprenderá de lo que puede lograr con solo unas pocas líneas de código.
El resultado final es una excelente manera de mostrar una tira de miniaturas de imágenes pequeñas que el usuario puede desplazarse para ver imágenes más grandes. Vamos a sumergirnos y ver cómo funciona.
El concepto
El diseño básico aquí es bastante simple. Queremos una tira de imágenes en miniatura y una gran imagen destacada. La parte difícil es hacer que la imagen mostrada cambie cuando el usuario se desplaza sobre una de las miniaturas.
Vistazo: Haga clic aquí para lanzar el producto terminado.
Con CSS, no puede crear dos divs distintos y luego hacer que el contenido de uno sirva como un punto de acción para el otro. Es bastante fácil en JavaScript, pero CSS le da menos libertad en la forma en que apila sus selectores.
Sin embargo, si somos inteligentes acerca de cómo estructuramos nuestro HTML, este proyecto es bastante sencillo de lograr. Vamos a ver cómo se ve esto.
El HTML
Para que esto funcione, necesitaremos cuatro imágenes en miniatura y cuatro imágenes a tamaño completo. La clave para que el primero actúe sobre el segundo es envolverlos de la siguiente manera:
La razón por la que estamos configurando una altura y una anchura específicas es para poder deslizar una imagen fuera de los límites del contenedor y ocultarla. Para este fin, también aplicamos un valor de desbordamiento de oculto y terminamos centrando todo con márgenes automáticos.
Control del progreso
En este punto, estamos mirando bastante duro, pero no te preocupes, ¡todo va por buen camino!
Posicionar todo
Como acabas de ver en la captura de pantalla, tus imágenes estarán por todas partes en este punto, así que ahora es el momento de obligar a todo a su posición correcta.
Una vez más, esto requiere un poco de reflexión. Queremos que todas nuestras miniaturas se agrupen y todas nuestras imágenes grandes se agrupen, pero no es así como se estructura el HTML.
Sin embargo, dado que cada tipo de imagen (pequeña y grande) tiene su propia clase, podemos flotar todos nuestros anclajes hacia la izquierda y luego separar las imágenes grandes mediante la aplicación de una posición absoluta.
Es muy importante entender cómo funciona esto, así que vamos a analizarlo. Flotando nuestros enlaces hacia la izquierda realizados. todos De las imágenes aparecen en línea, una tras otra. Sin embargo, el posicionamiento absoluto en las imágenes grandes los saca de este flujo y los coloca específicamente en el lugar que hemos designado utilizando las propiedades superior e izquierda. Esto deja solo las imágenes en miniatura para ser flotadas.
Control del progreso
Con muy poco código, pudimos transformar nuestro lío de imágenes en un diseño bien organizado. Tenga en cuenta que solo verá una imagen grande en este punto porque las demás están apiladas debajo de ella.
Traerlo a la vida
Ahora que todo está en su lugar, es hora de que funcione. Lo primero que queremos hacer es mover todas las imágenes grandes, excepto nuestra cubierta destacada, fuera de los límites del contenedor. Esto implica dar un paso atrás y revisar algunos de nuestros códigos anteriores.
Regresa y configura todas las imágenes grandes a 900 px desde la parte superior. Esto los empujará fuera del fondo de nuestro contenedor. Mientras esté allí, también debe configurar una transición. Apunte a la propiedad superior y establezca la duración de la transición en un segundo y la función de sincronización para facilitar.
Este código empuja todos De las grandes imágenes fuera de límites, incluyendo nuestra imagen de portada. Usa el código de abajo para traer esto de vuelta.
Aquí utilizamos los valores superior e izquierdo que habíamos establecido antes para fijar la cubierta en un solo lugar. El valor del índice z asegura que esta imagen permanecerá en la parte inferior de la pila. Si no hacemos esto, ¡ni siquiera podremos ver las otras imágenes cuando se deslicen!
Estilos de Hover
Ahora que hemos colocado todas las imágenes grandes fuera del contenedor, debemos recuperarlas cuando el usuario se detenga. Esto se logra apuntando a las imágenes grandes y devolviendo la propiedad superior a 260px. También agregué un efecto de sombra a las miniaturas para que pueda ver el efecto de activación de desplazamiento.
Debido a la forma en que configuramos nuestro HTML, cada miniatura corresponde automáticamente a la imagen grande que lo acompaña.Entonces, aunque estamos sobre la miniatura, el navegador lo ve como todo un ancla y no le importa manipular solo la parte con la gran clase aplicada. Bastante limpio ¿verdad?
Verlo en acción
Con eso, todos hemos terminado con nuestro deslizador impresionante. Echa un vistazo a la demostración en vivo a continuación y desplázate sobre las miniaturas para probarla. Para mostrar la versatilidad de este proyecto, incluí dos versiones alternativas en la demostración que implementan animaciones ligeramente diferentes. Asegúrese de revisarlos también.
Manifestación: Haga clic aquí para lanzar.
Conclusión
Si prestaste mucha atención, aprendiste muchas cosas en este tutorial. Primero, superamos el desafío de cómo usar una pieza de un documento HTML para actuar sobre otra usando solo CSS, que no es una tarea fácil. Además de esto, aprendimos algunas técnicas interesantes de posicionamiento e incluso incursionamos un poco en la manipulación del orden de apilamiento de imágenes mediante el índice z.
Si te ha gustado este tutorial, deja un comentario y avísanos. ¿Tiene otros usos para los controles remotos como los que usamos aquí? ¡Quiero escucharlos!