Uso de imágenes para mejorar el efecto de desplazamiento de CSS

Hover es uno de los selectores más antiguos de la familia CSS. Si bien estamos acostumbrados a creer que está maravillosamente emparejado con un enlace, en realidad se puede usar en todos los elementos de la interfaz, como botones, SVG, imágenes, etc. La razón es simple y radica en su esencia. Parafraseando la especificación: Hover selecciona elementos cuando el puntero del mouse se coloca sobre ellos. Lo que elija, estará allí, tanto si le gusta como si no.

¿Y a quién no le gusta? Con el selector : Hover puede hacer que su sitio web sea un lugar informativo y cómodo para los usuarios. Cuando usas sus poderes, puedes fácilmente:

• resaltar ciertos elementos sacándolos del flujo de contenido;
• Mostrar sugerencias para eliminar la posible confusión;
• para enriquecer el contenido estático con giros emocionantes; [19659004] Mejora la narración de cuentos.
• Crea un patio de recreo en el área del héroe, etc.

Hay muchas formas de beneficiarte de él. Sin embargo, lo que hemos notado últimamente es que los desarrolladores dan nueva vida al efecto banal y aburrido de desplazamiento del enlace. El truco es el uso de imágenes grandes. Puede parecer un poco indignante al principio, pero de alguna manera lograron que este enfoque fuera elegante, visualmente interesante, cautivador y valiente.

Veamos algunos ejemplos convincentes del efecto en acción.

Subsense es un representante típico de esta pequeña y refrescante tendencia. La página de inicio de la agencia digital italiana aprovecha al máximo el enfoque minimalista. El diseño es convencional, mientras que el relleno gráfico sigue siendo raro. Aquí hay algunos bloques de texto, navegación y mucho espacio aéreo. Sin embargo, el sitio web no es aburrido.

Por el contrario, se ve emocionante y fresca. Da la bienvenida a los visitantes en línea con una lista de trabajos que constituyen la mayor parte de la pantalla. Cada nombre de un proyecto va acompañado de una imagen correspondiente, que se muestra mientras se desplaza. Es enorme, por lo que no te lo perderás.

Tenga en cuenta que el equipo llama la atención sobre su cartera y la convierte en la estrella del espectáculo. No reinventan la rueda y no usan animaciones modernas. Todo está ordenado, limpio y simplemente brillante.

La cartera de Mine Studio es otro ejemplo característico del uso de la tendencia. Al mismo tiempo, demuestra cómo se puede usar el efecto para que el minimalismo funcione para usted.

Aquí la página del título está casi contenida y visualmente retirada. Es solo una presentación de diapositivas; Sin embargo, cumple su propósito perfectamente. El área del héroe está ocupada por un control deslizante horizontal basado en texto con tres niveles. Cada uno contiene los títulos de los trabajos anteriores. Si mueve el puntero del mouse sobre el nombre, se muestra una imagen. Aunque no se extiende de arriba a abajo como Subsense, sin duda es notable.

Observe dos cosas aquí. Primero, cada aspecto de la imagen se enriquece con el popular efecto de transición de estilo de onda que lo hace ver elegante y moderno. En segundo lugar, el nombre cambia de color y agrega un foco adicional al elemento seleccionado.

Aunque el equipo conserva una apariencia simple, el área del héroe no se siente fácil. Por el contrario, se siente de primera clase.

El equipo detrás de la cartera de Ada Sokol sigue el mismo enfoque.

Esta es otra página de inicio de una pantalla en nuestra colección. También es espacioso y muy conservador con el contenido. Solo hay navegación regular. Las obras favoritas se presentan como enlaces. Y aquí está la magia.

El estado del limbo no solo desencadena la apariencia de la imagen, sino también un pequeño truco con su visualización. La imagen no solo se mueve en el espacio. se distorsiona y deja un rastro de gráficos distorsionados. Es una forma inusual pero ganadora de llamar la atención sobre las piezas del portafolio y cumplir con las tendencias actuales que se combinan hábilmente con trucos de movimiento. Considere Nicolas Lanthemann y VLNC Studio.

Con Nicolas Lanthemann, la imagen no solo aparece, sino que se mueve, gira y llama la atención. Mientras que la agencia creativa de VLNC ha combinado la técnica de tendencia con el puntero del mouse . Donde quiera que vaya el ratón, la imagen la sigue y deja un rastro desvaído.

Si crees que esta nueva tendencia afectará solo a los héroes, entonces te preguntarás si están en todas partes se encuentran Solo mira Language Keepers.

El equipo detrás del diseño web de Language Keepers utiliza esta técnica para mejorar el menú principal. Al igual que la mayoría de los sitios web de la época, la navegación está oculta detrás del Hamburger Button . Cuando está abierto, ocupa toda la pantalla. El menú está dividido en dos columnas.

Cada enlace es seguido por una imagen que lo dice todo. Independientemente del elemento de navegación al que esté apuntando, en la parte inferior de la página no solo obtendrá una breve descripción, sino también una ayuda visual.

El equipo detrás de Corphes obtiene beneficios de esta solución en varios lugares del sitio. Primero, le han dado un toque especial a la lista regular basada en ruedas en la navegación. Aquí cada enlace se ve audaz e informativo.

Segundo, han mejorado la investigación del contenido principal en la página de destino. Por ejemplo, una de las secciones contiene bloques de texto que son compatibles con las imágenes que se muestran al pasar el ratón.

Aquí encontrará la tendencia utilizada en el medio de la página de inicio. Es una técnica antigua, pero el equipo ha logrado cambiarla un poco para evitar que se vea normal.

Primero, te encontrarás con las áreas vacías donde los títulos están enmascarados para indicar que hay algo en él. De esta manera, el equipo despierta el interés de los visitantes. Después de mover el puntero del mouse sobre el campo, la imagen aparece y admite el título y su mensaje. Simple pero elegante.

No menos importante en nuestra colección es Lecomte de Bregeot. La característica principal de esta tendencia es que el equipo usa videos en lugar de imágenes, lo que amplía los límites y muestra que podemos usar un tipo diferente de imágenes.

Imágenes grandes, gran efecto

Es tan emocionante ver cómo los creativos convierten los elementos probados y aburridos de la interfaz web en una extravagancia. Los efectos de desplazamiento simple, que generalmente desempeñan un papel de apoyo para los enlaces, desempeñan el papel principal hoy en día. Muestra una vez más que todavía hay espacio para experimentos y desarrollos posteriores.