Animación de partículas: 20 soluciones de Codepen

Los experimentos con canvas, un elemento básico HTML5 que se utiliza para producir gráficos de varios tipos y escalas en una página web, están ganando cada vez más popularidad hoy en día. Parece que los desarrolladores web han depositado su fe en esta tecnología, incluso a pesar de que sufre de la falta de compatibilidad adecuada con el navegador.

Con la intención de desbloquear varias posibilidades de este potente elemento, los artistas obtienen resultados bastante notables y ocasionalmente inesperados que llaman la atención desde los primeros segundos. Uno de esos experimentos exitosos que han encontrado su aplicación práctica en el diseño de sitios web es la animación de partículas.

Usando solo las herramientas normales y, por supuesto, un poco de magia de Javascript, los puntos primitivos en la pantalla comienzan a moverse caóticamente, rebotar, bailar, responder a la gravedad, formar varias formas e incluso interactuar con los usuarios. Además, con la ayuda de bibliotecas más potentes como WebGL, Three.js o TweenMax se transforman en verdaderas obras maestras que son capaces de captar la mayor parte del pastel de atención en cualquier interfaz.

Si echas un vistazo a elegant Deutser o top-notch Void, notarás que tienen una cosa en común: todos ellos están enriquecidos con centros de mesa inspirados en partículas que llevan la experiencia del usuario al siguiente nivel. Son ejemplos representativos de la corriente. ¿No son excepcionales? La característica está en tendencia en estos días, así que ¿por qué no familiarizarse con una docena de soluciones disponibles en Codepen para aprender?

Hemos incluido diferentes implementaciones para reflejar la diversidad de la dirección. Explorar, y dinos cuál es tu favorito?