¡Auge! Examinando explosiones en diseño web

Hay muchas maneras de captar la atención de la audiencia. Tenemos muchas opciones, a pesar de que el estado actual de las tecnologías aún es imperfecto. Estamos experimentando algunos problemas de compatibilidad con los navegadores, y no todos los dispositivos pueden manejar todas esas soluciones grandiosas que nos brindan los desarrolladores web.

Sin embargo, los días de los sitios web estáticos donde las imágenes eran la principal fuerza impulsora y los controles deslizantes con transiciones elegantes eran la única especia han desaparecido. Estamos presenciando una era de ideas audaces y extravagancias.

Uno de los mejores aspectos es que los desarrolladores no limitan su enfoque a las cosas grandes. Sí, podemos ver numerosas animaciones de lienzo, experimentos de video y realidad virtual abrumadores que requieren un modo de pantalla completa, etc. Sin embargo, hoy en día, incluso los detalles más pequeños reciben su propia dosis de atención.

Los sitios web están repletos de soluciones microscópicas, especialmente aquellas que se basan en el cursor del mouse. Podemos tropezar con numerosas ideas inteligentes. Son fantásticos, pero en la mayoría de los casos son (¿cuál es la palabra que busco?), “silenciosos”. No estoy hablando de que emitan sonidos, ya que algunas de las soluciones basadas en mouse realmente emiten un sonido. Estoy hablando de su comportamiento.

Su comportamiento es suave, tranquilo y gentil. En algunos casos, es tan uniforme que apenas es perceptible. Y si está demasiado comprometido con el contenido o hay otros elementos que lo distraen, es probable que incluso pueda pasarlos por alto. Entonces, ¿por qué no hacerlos un poco más "fuertes" para que los usuarios no pierdan la oportunidad de disfrutarlos?

Cómo hacer esto, usted puede pedir. Tengo una buena solución: hacer que las cosas exploten, literal y figurativamente.

Partículas en el espacio por Dean Wagman

Tomemos, por ejemplo, este fantástico fragmento de código creado por Dean Wagman. Aunque este es el primer experimento de lienzo realizado por Dean, es muy inspirador. Todo lo que necesita hacer es hacer clic en cualquier parte de la pantalla y verá una explosión de cientos de pequeñas partículas brillantes que vuelan directamente hacia su cara. Aunque no hace ningún sonido, ciertamente se siente tumultuoso.

ver la pluma
Partículas en el espacio por Dean Wagman (@deanwagman).

Los efectos de explosión siempre despiertan la sensación de que algo fuerte ha sucedido. Entonces, ¿por qué no usar esto a nuestro favor y agregar algo de ruido sin hacer un sonido real? Además, aquí tenemos una selección de fantásticos fragmentos de código. Exploremos juntos.

Explosión de partículas por Aleksei / Kaboomerz por Christopher Lis

Si la solución de Dean Wagman parece demasiado, siempre puedes probar la explosión de partículas de Aleksei. O si, por el contrario, necesitas causar un impacto más significativo, siempre puedes adoptar Kaboomerz de Christopher Lis.

El primer fragmento de código presenta una versión de "hermano pequeño" de la explosión de Dean, donde docenas de partículas diminutas forman una pequeña explosión que aparece y muere rápidamente. En el caso de Christopher Lis, te sorprenderá el tamaño de las partículas. El confeti que sale del cursor del ratón es tremendamente enorme. Sin embargo, gracias a su corta vida útil, el efecto general no es abrumador. Es simplemente agradable.

ver la pluma
Explosión de partículas JS/CSS3 por Aleksei (@alek).

ver la pluma
#Codevember 5 – Kaboomerz por Christopher Lis (@chriscourses).

Explosiones DOM por David A.

Si te gusta esta idea pero necesitas algo más digital e inspirado en lo retro, hay una solución increíble creada por David. Utiliza rectángulos de varios tamaños en lugar de círculos para lograr un encantador toque de 8 bits. Como resultado, podemos presenciar una pequeña explosión con carisma de los 80.

ver la pluma
Explosiones DOM por David A. (@meodai).

Destellos de WebGL por CreateJS

Si busca una versión realista, WebGL Sparkles by CreateJS es un ejemplo perfecto a considerar. Aunque todas las partículas aquí son blancas, gracias al comportamiento bien pensado, parece un verdadero disparo de celebración cuando haces clic en la pantalla. Además, el cursor tiene una bonita estela que le da un toque mágico a la escena.

ver la pluma
CreateJS: WebGL Sparkles de CreateJS (@createjs).

Lanzador automático de fuegos artificiales de Christopher Lis

Hablando de eso, nuestra colección de explosiones no estaría completa sin una dosis de locura pirotécnica. Automatic Firework Launcher de Christopher Lis es un fantástico ejemplo a tener en cuenta. Es un lanzador de fuegos artificiales de dibujos animados. Gracias a las partículas de colores y las formas de clavel, nos recuerda a los fuegos artificiales reales que iluminan el cielo estrellado.

ver la pluma
Día 29: Lanzador automático de fuegos artificiales por Christopher Lis (@chriscourses).

Concepto de destrucción de ventana modal de LegoMushroom

Los experimentos de Canvas no son los únicos en nuestra lista. Los efectos de explosión se pueden aplicar a varios elementos de la interfaz, como una ventana modal. LegoMushroom tiene una clara prueba de ello. Eche un vistazo a su concepto de ventana modal. Cuando cierras la ventana, en lugar de desaparecer, se rompe en varios pedazos. Es un complemento perfecto para todos esos elegantes sitios web completamente ilustrados que son bastante populares en estos días.

ver la pluma
Concepto de destrucción de ventana modal por LegoMushroom (@sol0mka).

SCSS Explosion Effect de Sylvain Garnot / SVG text explosion de Kacper Bawol / Canvas text explosion de Tim Horwood

Los efectos de explosión también pueden ser beneficiosos para la tipografía. Considere SCSS Explosion Effect de Sylvain Garnot, SVG text explosion de Kacper Bawol y Canvas text explosion de Tim Horwood.

Los tres demuestran un efecto de explosión aplicado al texto. Como era de esperar, el cursor del mouse activa cada uno.

Sylvain Garnot permite a los usuarios expandir cada letra en cien pequeños cuadrados. El concepto de Kacper Bawol parece casi el mismo, pero esta vez el símbolo se divide en pequeños triángulos. Y, Tim Horwood permite a los usuarios expandir todo el texto en partículas diminutas que finalmente regresan y devuelven todo a su estado original. Las tres ideas son simplemente increíbles.

ver la pluma
SCSS - Efecto de explosión por sylvain garnot (@sylvaingarnot).

ver la pluma
Explosión de texto SVG de Kacper Bawol (@Casperovic).

ver la pluma
Explosión de texto de lienzo, haga clic para ver por Tim Horwood (@tdhorwood).

Explosión de la casa por Ko.Yelie

El efecto de explosión también se puede aplicar a las imágenes. Este concepto de Ko.Yelie es un gran ejemplo. Al hacer clic en la imagen, la explotas en pequeños pedazos. Aunque es difícil encontrar una aplicación para esto en las interfaces de la vida real, siempre es bueno tener algunas soluciones extraordinarias al alcance de la mano que pueden hacer que las cosas comunes se vean únicas.

ver la pluma
Explosión de la casa por Ko.Yelie (@ko-yelie).

Una característica explosiva

Un efecto de explosión es una herramienta controvertida. No es adecuado para todas y cada una de las interfaces que existen debido a su naturaleza "explosiva" y su poderoso carisma. Aunque parece inofensivo e incluso neutral cuando se aplica junto con el cursor del mouse, es bastante "ruidoso", por lo que debe tener cuidado.

Recuerde, no todas las personas buscan entretenimiento en los sitios web. Y no todo el mundo está preparado para extravagancias e impresiones abrumadoras. Al final del día, el contenido siempre sigue siendo el rey.

Sin embargo, si está buscando formas inusuales de crear una interacción de usuario emocionante que sea divertida y, por así decirlo, "ruidosa", entonces, sin duda, un efecto de explosión puede ser útil.