Animação de partículas: 20 soluções do Codepen

experimentos com canvas, um elemento HTML5 básico que é usado para produzir gráficos de vários tipos e escala em uma página da web, estão ganhando cada vez mais popularidade hoje em dia. Parece que os desenvolvedores da web depositaram sua fé nessa tecnologia, mesmo apesar do fato de que ela sofre com a falta de compatibilidade adequada do navegador.

com a intenção de desbloquear várias possibilidades deste elemento potente, os artistas apresentam resultados bastante notáveis e ocasionalmente inesperados que chamam a atenção desde os primeiros segundos. Um desses experimentos bem-sucedidos que encontraram sua aplicação prática no design de sites é a animação de partículas.

usando apenas as ferramentas regulares e, claro, um pouco de magia de Javascript, pontos primitivos na tela começam a se mover caoticamente, saltar, dançar, responder à gravidade, formar várias formas e até mesmo interagir com os usuários. Além disso, com a ajuda das bibliotecas mais poderosas, como WebGL, três.js ou TweenMax eles se transformam em verdadeiras obras-primas que são capazes de pegar o maior pedaço da torta de atenção em qualquer interface.

se você der uma olhada no elegant Deutser ou no top-notch Void, notará que eles têm uma coisa em comum: todos eles são enriquecidos com peças centrais inspiradas em partículas que levam a experiência do usuário ao próximo nível. Eles são exemplos representativos do fluxo. Eles não são excelentes? O recurso está em tendência nos dias de hoje, então por que não se familiarizar com uma dúzia de soluções disponíveis no Codepen para aprender?

incluímos diferentes implementações para refletir a diversidade da direção. Explore – os e diga-nos qual é o seu favorito?