Me encanta el desafío de construir algo con CSS que usa un elemento para activar otro. Puede ser bastante complicado envolver su mente en torno a todas las piezas involucradas y encontrar una manera de hacer que su HTML fluya de una manera que sea fácilmente controlada en su CSS.
Hoy vamos a embarcarnos en tal desafío. Construiremos una página de inicio básica que intercambie imágenes de fondo en función del enlace sobre el que se esté desplazando en la navegación. A lo largo del camino, aprenderá todo sobre la idea de los vuelos remotos y cómo usarlos en sus proyectos.
Juego de manos
¿Sabía que es posible, utilizando solo CSS, manipular un elemento cuando un usuario se desplaza sobre un elemento completamente diferente? Es un poco complicado, pero una vez que lo haces, puedes lograr algunos efectos realmente geniales.
Para ver cómo funciona esto, vamos a usar un ejemplo muy básico. Imagina que tienes el siguiente código:
Mientras que antes apuntábamos solo a hermanos adyacentes, ahora estamos apuntando a cualquier hermano mayor. Así que ahora, todas las imágenes que se encuentran en el mismo nivel del árbol DOM como nuestro ancla recibirán un borde como resultado de la flotación.
Cambiando la forma en que piensas
? No te rindas! La experimentación es donde ocurre la educación.Tenga en cuenta que, para que esta técnica funcione, los elementos con los que nos estamos metiendo tienen que estar estrechamente relacionados desde la perspectiva del árbol DOM. Más específicamente, el elemento que va a manipular debe ser un hermano o hijo del elemento sobre el que desea desplazarse. No se puede tener un control remoto que requiera volver a subir al árbol DOM.
¡Cuando comience a crear proyectos que utilizan esta técnica, descubrirá que estas reglas simples pueden causar algunos dolores de cabeza reales! Inclinan y rompen el formato que normalmente podría usar para estructurar su HTML y hacen que piense creativamente para descubrir cómo reestructurar sus elementos de manera correcta para que funcionen los elementos emergentes remotos.
Para el ejemplo de hoy, me tomó varios intentos estructurar correctamente mi HTML y CSS para que todo funcione. Desde su perspectiva, se verá super simple porque lo pondré en el orden correcto. Sin embargo, recuerde que cuando haga esto en sus propios proyectos, va a tomar muchos retoques y modificaciones. ¡No te rindas! La experimentación es donde ocurre la educación.
Lo que estamos construyendo
El elemento que estamos construyendo hoy es una simple página web. La navegación es un menú vertical en el lado izquierdo y el resto del cuadro de contenido está ocupado por una imagen grande.
Manifestación: Haga clic aquí para lanzar.
Ahora, si esto es todo lo que estábamos haciendo, el HTML sería bastante simple. Un div grande con una imagen de fondo que contiene un div más estrecho con un fondo blanco y una lista desordenada dentro. Sin embargo, queremos hacer las cosas un poco más complicadas. Cuando el usuario se desplaza sobre un enlace de navegación, la imagen de fondo debe cambiar.
Esto significa que necesitamos una pila completa de imágenes de fondo. Sin embargo, el desafío es averiguar dónde colocar esas imágenes en el marcado para que podamos acceder a ellas a través de un control remoto. Vamos a ver cómo funciona.
Paso 1: HTML
Para nuestro HTML, vamos a necesitar un contenedor y una lista desordenada dentro de un elemento de navegación, que está envuelto en un div contenedor. Aquí está la estructura básica:
Obviamente, vamos a querer un texto en nuestra navegación, para que podamos incluirlo también. También tenga en cuenta que lancé un encabezado para servir como identificador del sitio.
Para terminar, vamos a añadir en nuestras imágenes. Queremos que cada enlace corresponda a una imagen. La mejor manera de hacer esto es colocar una imagen después de cada enlace, de esta manera podemos controlar esas imágenes cuando un enlace se desplaza al aprovechar un selector de hermanos como lo hicimos anteriormente. Así es como se ve esto en acción:
Esto asegurará que tengamos la barra blanca del lado izquierdo que queremos. Ahora vamos a pasar el estilo del texto y la lista. Necesitamos apuntar al h1 y al ul, luego aplicar un estilo básico:
Ahora que tenemos el elemento ul en estilo, necesitamos profundizar y específicamente diseñar los fragmentos de texto, que en realidad son todos los elementos de anclaje dentro de los elementos de la lista. Dirígete a estos, configúralos para bloquearlos de manera que puedas establecer específicamente sus dimensiones, y luego repáralos así:
Dada la forma en que nuestro documento está estructurado, no podemos movernos demasiado alrededor de ese elemento de navegación o lista desordenada. Como resultado, debemos apuntar específicamente al primer elemento de la lista para que podamos colocar el texto en su lugar. Esto se logra con nth-child (solo IE9 y superior, use selectivizr para navegadores más antiguos).
Paso 5: Estilos de Hover
Como puede ver en la imagen de arriba, el menú de navegación se ve perfecto ahora.Desafortunadamente, todavía no hace nada! Sin embargo, no se preocupe, hemos configurado todo de la manera que lo necesitamos, por lo que unas pocas líneas de CSS es todo lo que se necesita para darle vida a todo.
Primero, agregué un efecto de desplazamiento al texto para que tenga alguna información visual de que algo está sucediendo allí. Esto es importante para ilustrar el concepto de que lo que el usuario está haciendo a la izquierda está afectando las fotos de la derecha.
Finalmente, para finalizar, todo lo que tenemos que hacer es esperar a que el usuario se desplace, luego tomar una de las imágenes fuera del contenedor y colocarla sobre la imagen de fondo predeterminada. Tenga en cuenta que hacemos esto con el combinador de hermanos adyacente que aprendimos antes. Esto asegura que estamos agarrando la imagen específica que está emparejada con el ancla que se está desplazando.
Verlo en acción
Con eso, todos hemos terminado! Ahora es el momento de echar un vistazo al fruto de nuestro trabajo. Asegúrese de desplazarse sobre cada uno de los enlaces en la barra lateral y observe cómo afecta la imagen de fondo.
Manifestación: Haga clic aquí para lanzar.
Ve a construir algo
A estas alturas, ya deberías tener una buena idea de cómo manejar hovers remotos para lograr algunos eventos CSS de lujo. Piensa en algo genial que hacer con esta idea y ve a construirla. Parece simple, pero casi puedo garantizar que te vas a encontrar con algunas dificultades alucinantes en el camino. ¡Solo vuelve a consultar aquí para ver cómo funciona y asegúrate de mantenerlo hasta que lo hayas dominado!