10 belos exemplos de animação de partículas em web design

Tomando a Web de assalto, as animações de partículas conseguiram criar um nicho para si há vários anos. A enorme obsessão atual por designs que têm uma vibração de alta tecnologia e decoração geométrica os torna uma das soluções mais procuradas atualmente.

Como regra, a animação de partículas pode ser vista em seções de heróis como, por exemplo, no JetUp Digital.

Como você pode ver, é uma maneira elegante de adicionar um certo tempero à primeira impressão, enquanto separa delicada e discretamente o site da multidão.

Para reproduzir esse efeito, seu primeiro passo deve ser o partition.js.

É um plugin leve de Vincent Garreau que é o coração e a alma da maioria das animações de partículas por aí. Além disso, em seu estado original, é uma das soluções mais copiadas da web – embora talvez não com tanta intensidade como no exemplo do autor.

Geralmente, os desenvolvedores preferem variantes mais limpas, modestas e calmas. Por exemplo, confira Canvas Particles de Romswell Roswell Parian Paucar. É uma combinação de partículas e paralaxe que resulta em uma estética envolvente e dinâmica.

No entanto, isso não significa que a abordagem se limite apenas a esse tipo de realização. Considere Partículas no espaço de Dean Wagman, sistema de partículas somente CSS de Robin Selmer e, é claro, o efeito de empurrão habilmente reproduzido e apresentado em um codepen de Alex Safayan. Enquanto o conceito de Robin Selmer é apenas uma peça agradável de assistir; os outros dois exigem a interação do usuário, e isso é sempre emocionante.

Usando animação de partículas para impressionar

Com o passar do tempo, a técnica amadureceu. Da bagunça caótica de pontinhos brancos que se espalhavam pela tela, transformou-se em uma ferramenta de grande potencial. Não é algo extraordinário, mas tem um certo fator uau. Além disso, contribui perfeitamente para a estética high-tech, geométrica e empresarial – finalizando-os naturalmente.

A premissa é: a animação de partículas deve impressionar. E, os desenvolvedores aderem a este postulado através de grosso e fino, tirando o máximo proveito dele. Vamos considerar alguns trechos de código fenomenais criados pelos verdadeiros fãs desta solução.

30.000 Partículas por Justin Windle

Aqui o título fala por si. Com 30.000 partículas a bordo, você espera algo grandioso. E Justin Windle certamente atendeu às nossas expectativas. Seu conceito é incrível. Use o mouse para brincar. A física é simplesmente excepcional. Esta versão da animação de partículas é bastante popular entre os desenvolvedores, embora não em uma escala tão monumental.

Peixe na água por Alex Safayan

Alex Safayan surgiu com quase a mesma solução, mas neste caso, as partículas estão cada vez mais ampliadas. O cursor do mouse também afasta os pontos, formando um traço com um sutil efeito de ondulação. O comportamento da animação lembra o movimento do peixe quando está próximo à superfície da água. Observe a física: a interação entre os pontos é bem pensada.

PLÂNCTON – Vida das partículas por Marco Dell'Anna

Tendo recebido um prêmio pelo projeto mais animado de 2017, Plankton certamente merece atenção. O projeto encanta não só com a ideia, mas também com a realização. Da coloração sutil que se encaixa aqui como uma luva a um comportamento magnífico que parece incrivelmente natural, Marco Dell'Anna está atento aos detalhes.

Stardust de Marco Dell'Anna

Eu adoro a magnífica vibração retrô, toques de neon e cores lindas aqui. É tão difícil tirar os olhos disso. Stardust é uma simbiose de design e codificação que resulta em uma obra-prima inspiradora.

Pontos de Gravidade por Akimitsu Hamamuro

Akimitsu Hamamuro convida você a adicionar os chamados “pontos de gravidade” em seu playground. Eles se intrometem no movimento caótico dos pontos e os puxam como um ímã. Embora não desempenhem um papel de centro de órbita; no entanto, eles formam pontos focais que forçam as partículas a se moverem em sua direção.

Particle Orb CSS por Nate Wiley

Esferas são escolhas estilísticas bastante populares para áreas de heróis nos dias de hoje. E a opinião de Nate Willey sobre essa tendência é bastante impressionante. O orbe parece frágil graças a pequenas partículas e, ao mesmo tempo, firme graças ao comportamento bem pensado. Sua rotina de desintegrar e reformar a esfera é fantástica.

Ondas de Partículas por Kevin Rajaram

Kevin Rajarm pegou a beleza e a elegância da animação de partículas e a aprimorou com a grandiosidade do Three.js, trazendo um conceito delicado, mas verdadeiramente sofisticado. Uma vista incrível das ondas parece futurista, artificial e fascinante.

Usos não ortodoxos

Existem maneiras ainda mais impressionantes de usar animação de partículas. Vamos sair do caminho comum e pensar fora da caixa: a abordagem pode facilmente beneficiar elementos como logotipos e letras.

Logo interativo de partículas por Tamino Martinius

O logotipo interativo de partículas é um exemplo típico disso. Parece uma solução re-imaginada do trecho de Justin Windle que é apresentado acima. Embora não haja 30.000 pontos, ele é composto por um número impressionante de partículas que habilmente formam a palavra “CODEPEN”. Este é um daqueles casos em que o conceito encontrou um uso prático.

Texto para partículas por Louis Hoebregts

A versão colorida da solução anterior está disponível nesta caneta de Louis Hoebregts. Aqui o texto é moldado por milhares de círculos sólidos coloridos que são enriquecidos pela mesma interatividade do exemplo anterior.

Partículas escrevem texto de Marco Dell'Anna

Embora esta não seja uma entrada dramática, há algo fascinante nela. A animação suave descobre lentamente os personagens e desperta nosso interesse. O conceito tem um certo toque misterioso semelhante à introdução de “Stranger Things”.

JUST DO IT de Marco Dell'Anna

Esta é outra obra-prima de Marco Dell'Anna. Desta vez, a animação de partículas participa da formação de um famoso logotipo da Nike. De obscura e semitransparente a nítida e sólida, a animação expõe gradualmente o logotipo, capturando discretamente a atenção geral.

Texto de 404 partículas de Enrico Toniato

Se você acha que o único uso prático da animação de partículas é enriquecer as seções de heróis, Enrico Toniato provará que você está errado. Sua opinião sobre a página de erro é brilhante. Siga sua ideia e use partículas em movimento para salvar a página 404 de parecer chata e repulsiva.

Um efeito de atenção

A animação de partículas é um daqueles casos em que menor é melhor. Quanto mais pequenos os pontos, mais impressionante é o efeito que pode ser alcançado. Por um lado, parece sofisticado e intrincado, já que geometria e física estão envolvidas. Por outro lado, parece frágil e sutil graças às formas delicadas. Essa fusão única torna a animação de partículas excepcional e chama a atenção.