8 fragmentos de CSS y JavaScript para efectos de revelación geniales

No es necesario mostrar todo lo que hay en un sitio web de forma sencilla. A veces es prudente ocultar un elemento. Luego podemos revelar esto automáticamente o mediante la interacción del usuario. Esto es lo que hace que los efectos de revelación sean tan atractivos. Pueden tener un doble propósito. La primera es mantener nuestros diseños bonitos y ordenados. El segundo es agregar algo de estilo a la experiencia del usuario (UX). Y hay muchas opciones interesantes para los diseñadores web. El uso de CSS y JavaScript ofrece un camino para crear efectos de alta gama. Sin embargo, no sólo se ven bien. Hay formas de crear funciones que sean eficaces y accesibles. ¿Quieres explorar algunas posibilidades? Echa un vistazo a nuestra colección de geniales efectos de revelación. Abarcan toda la gama en términos de casos de uso y tecnología. Revelación CSS de tarjeta rasca y gana por Nicolas Jesenberger Este efecto de revelación imita una experiencia del mundo real, utilizando una tarjeta rasca y gana. Utilice su dedo o un dispositivo señalador para «raspar» la lámina plateada. A continuación encontrarás una pequeña sorpresa. Es inteligente y está bien ejecutado. Echa un vistazo a la presentación de la varita mágica con bolígrafo y rasca y gana de Nicolas Jesenberger por Kalis Network. Aquí hay un fragmento que lleva la magia web al siguiente nivel. Mueve la varita mágica de izquierda a derecha para revelar la galería de imágenes a continuación. También hay un efecto sutil para las imágenes cercanas. Están borrosos y se muestran con menor opacidad. Mire la animación Pen Magic Reveal de Kalis Network Circular Reveal de Liza Shermayster No es necesario exagerar los efectos de revelación. Esta sencilla presentación de diapositivas revela más de la imagen al pasar el cursor. Y también agrega una animación de texto elegante. Esto funcionaría bien en un portafolio o en una página Acerca de nosotros. Echa un vistazo a la animación de revelación con lápiz circular de Liza Shermayster. Animación de revelación de texto de Owlypixel. ¿Qué tal un efecto de revelación que se activa automáticamente? Este título animado es hermoso y definitivamente llamará la atención del usuario. También funciona con CSS. Esto significa que no hay scripts complicados que ralenticen los tiempos de carga de la página. El JavaScript utilizado en el fragmento actualiza la demostración. Echa un vistazo a la animación Pen Text Reveal de Owlypixel Ink Transition Reveal de Ryan Yu. Estas animaciones basadas en desplazamiento son increíbles. La obra de arte parece estar dibujada en la pantalla a medida que se desplaza. El efecto crea una atmósfera para mejorar la UX. Se trata de efectos especiales que adaptan el contenido a una camiseta. Echa un vistazo al efecto de transición Pen Ink con sprite PNG de Ryan Yu (@iamryanyu) Revelación de interacción del póster de la película de Ethan Card Las interfaces de usuario son un elemento de diseño popular hoy en día. Pero sólo existe un cierto límite en cuanto al contenido que pueden contener. Este fragmento ofrece una solución alternativa sólida. Pase el cursor sobre una pestaña para revelar contenido adicional. El diseño permanece limpio y agrega un poco de interactividad. Vea la interacción del lápiz en el efecto de revelación de la página del póster de la película de Ethan por Kevin Levron Sí, ¡puede usar efectos de revelación para una página completa! Y esta herramienta puede ayudarle a crear la solución perfecta para su proyecto. Elija entre diferentes tipos de animación y otras opciones para crear una hermosa presentación. Además, es divertido experimentar. Consulte Efecto de revelación de página de lápiz (CSS/VueJS) de Kevin Levron Revelados accesibles fuera del lienzo de Vasileios Mitsaras Los elementos fuera del lienzo son un lugar conveniente para almacenar información adicional. A menudo se utilizan para ocultar la navegación móvil para que los usuarios puedan centrarse en el contenido. Esta demostración utiliza jQuery para agregar elementos que se pueden revelar de múltiples maneras. Vea el accesible lápiz Offcanvas de Vasileios Mitsaras Una forma reveladora de crear una interfaz de usuario Los efectos reveladores pueden adoptar muchas formas. Son adecuados para todo, desde un sitio web comercial hasta un juego en línea. Su potencial es vasto y variado. Sin embargo, sigue siendo importante considerar el impacto en los usuarios. Las mejores implementaciones se sienten naturales y contribuyen a la UX. Por tanto, lo mejor es evitar efectos que dificulten el acceso a los contenidos. Afortunadamente, CSS y JavaScript ofrecen mucho margen de maniobra. Puede utilizar la combinación que mejor se adapte a su proyecto. ¿Quieres ver aún más efectos de revelación? ¡Mira nuestra colección CodePen! Superior

About Francisco

Check Also

Libro electrónico: Una guía práctica para construir una estrategia de datos e IA

Libro electrónico: Una guía práctica para crear una estrategia de datos e inteligencia artificial | …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *