10 hermosos ejemplos de animación de partículas en diseño web

Tomando por asalto la Web, las animaciones de partículas lograron hacerse un hueco hace varios años. La enorme obsesión actual por los diseños que tienen un ambiente de alta tecnología y una decoración geométrica los convierte en una de las soluciones más buscadas en la actualidad.

Como regla general, la animación de partículas se puede ver en secciones de héroes como, por ejemplo, en JetUp Digital.

Como puede ver, es una forma elegante de agregar un cierto sabor a la primera impresión, mientras separa delicada y discretamente el sitio web de la multitud.

Para reproducir este efecto, su primer paso debe ser las partículas.js.

Es un complemento liviano de Vincent Garreau que es el corazón y el alma de la mayoría de las animaciones de partículas que existen. Es más, en su estado original, es una de las soluciones más copiadas en la web, aunque quizás no con tanta intensidad como en el ejemplo del autor.

Generalmente, los desarrolladores prefieren variantes más ordenadas, modestas y tranquilas. Por ejemplo, echa un vistazo a Canvas Particles de Romswell Roswell Parian Paucar. Es una combinación de partículas y paralaje que da como resultado una estética atractiva y dinámica.

Sin embargo, esto no significa que el enfoque se limite a este tipo de realización. Considere Partículas en el espacio de Dean Wagman, sistema de partículas solo CSS de Robin Selmer y, por supuesto, el efecto de alejamiento reproducido hábilmente y presentado en un codepen de Alex Safayan. Si bien el concepto de Robin Selmer es solo una pieza agradable de ver; los otros dos requieren la interacción del usuario, y eso siempre es emocionante.

Uso de la animación de partículas para impresionar

Con el paso del tiempo, la técnica maduró. Del desorden caótico de pequeños puntos blancos que estaban esparcidos por todo el lienzo, se transformó en una herramienta con un gran potencial. No es algo extraordinario, pero tiene un cierto factor sorpresa. Además, contribuye perfectamente a la estética de alta tecnología, geométrica y empresarial, rematándolas naturalmente.

La premisa es: la animación de partículas debe impresionar. Y los desarrolladores se apegan a este postulado en las buenas y en las malas, aprovechándolo al máximo. Consideremos algunos fragmentos de código fenomenales creados por los verdaderos fanáticos de esta solución.

30.000 partículas de Justin Windle

Aquí el título habla por sí mismo. Con 30.000 partículas a bordo, esperas algo grandioso. Y Justin Windle ciertamente ha cumplido con nuestras expectativas. Su concepto es increíble. Usa tu ratón para jugar. La física es simplemente excepcional. Esta versión de animación de partículas es bastante popular entre los desarrolladores, aunque no en una escala tan monumental.

Pez en el agua de Alex Safayan

A Alex Safayan se le ocurrió casi la misma solución, pero en este caso, las partículas se agrandan cada vez más. El cursor del mouse también aleja los puntos, formando un trazo con un sutil efecto dominó. El comportamiento de la animación recuerda al movimiento de los peces cuando está cerca de la superficie del agua. Tenga en cuenta la física: la interacción entre los puntos está bien pensada.

PLANCTON – Vida de las partículas por Marco Dell'Anna

Habiendo recibido un premio al proyecto más entusiasta de 2017, Plankton ciertamente merece atención. El proyecto cautiva no solo con la idea sino también con la realización. Desde la sutil coloración que encaja aquí como anillo al dedo hasta un magnífico comportamiento que parece increíblemente natural, Marco Dell'Anna tiene buen ojo para los detalles.

POLVO DE ESTRELLAS de Marco Dell'Anna

Adoro el magnífico ambiente retro, los toques de neón y los hermosos colores aquí. Es tan difícil quitarle los ojos de encima. Stardust es una simbiosis de diseño y codificación que da como resultado una obra maestra inspiradora.

Puntos de gravedad de Akimitsu Hamamuro

Akimitsu Hamamuro te invita a agregar los llamados "puntos de gravedad" en su patio de recreo. Se entrometen en el movimiento caótico de los puntos y los atraen como un imán. Aunque no cumplen una función de centro de órbita; sin embargo, forman puntos focales que obligan a las partículas a moverse en su dirección.

Particle Orb CSS por Nate Wiley

Las esferas son opciones estilísticas bastante populares para las áreas de los héroes en estos días. Y la opinión de Nate Willey sobre esta tendencia es bastante impresionante. El orbe se ve frágil gracias a las diminutas partículas y, al mismo tiempo, firme gracias a un comportamiento bien pensado. Su rutina de desintegrar y volver a formar la esfera es fantástica.

Ondas de partículas de Kevin Rajaram

Kevin Rajarm tomó la belleza y la elegancia de la animación de partículas y la mejoró con la genialidad de Three.js, creando un concepto delicado pero verdaderamente sofisticado. Una increíble vista de las olas se siente futurista, artificial y fascinante.

Usos poco ortodoxos

Hay formas aún más impresionantes de usar la animación de partículas. Salgamos del camino trillado y pensemos fuera de la caja: el enfoque puede beneficiar fácilmente elementos tales como logotipos y letras.

Logotipo de partículas interactivas por Tamino Martinius

Interactive Particle Logo es un ejemplo típico de eso. Parece una solución reimaginada del fragmento de código de Justin Windle que se muestra arriba. Aunque no son 30.000 puntos, está compuesto por una cantidad impresionante de partículas que hábilmente forman la palabra “CODEPEN”. Este es uno de esos casos donde el concepto encontró un uso práctico.

Texto a partículas por Louis Hoebregts

La versión colorida de la solución anterior está disponible en este bolígrafo de Louis Hoebregts. Aquí el texto está formado por miles de círculos sólidos de colores que se enriquecen con la misma interactividad que en el ejemplo anterior.

Las partículas escriben texto de Marco Dell'Anna

Aunque esta no es una entrada dramática, hay algo cautivador al respecto. La suave animación descubre lentamente a los personajes y despierta nuestro interés. El concepto tiene un cierto estilo misterioso similar a la introducción de "Stranger Things".

SOLO HAZLO de Marco Dell'Anna

Esta es otra obra maestra de Marco Dell'Anna. Esta vez, la animación de partículas participa en la configuración de un famoso logotipo de Nike. De oscuro y semitransparente a nítido y sólido, la animación expone gradualmente el logotipo, captando discretamente la atención general.

Texto de 404 partículas por enrico toniato

Si cree que el único uso práctico de la animación de partículas es enriquecer las secciones de los héroes, Enrico Toniato demostrará que está equivocado. Su opinión sobre la página de error es brillante. Siga su idea y use partículas puestas en movimiento para evitar que la página 404 se vea aburrida y repulsiva.

Un efecto que llama la atención

La animación de partículas es uno de esos casos en los que cuanto más pequeño, mejor. Cuanto más pequeños sean los puntos, más impresionante será el efecto que se puede lograr. Por un lado, parece sofisticado e intrincado ya que están involucradas la geometría y la física. Por otro lado, se ve frágil y sutil gracias a las formas delicadas. Esta fusión única hace que la animación de partículas sea excepcional y llamativa.