Ataque dos fundos animados baseados em blob em web design

Planos de fundo animados são um recurso popular de sites modernos. Não é mais uma tendência ou algo extraordinário. É apenas uma das maneiras viáveis ​​de adornar uma área de herói nos dias de hoje. Embora ainda haja um problema com a compatibilidade do navegador, a solução conseguiu criar um nicho para si.

Existem diferentes tipos de animações. Você pode tropeçar em:

• Animações de partículas;
• Animações caleidoscópicas;
• Animações 3D abstratas;
• Animações geométricas suaves e muito mais.

Enquanto vários anos atrás as animações de partículas inspiradas em constelações estavam dominando o poleiro, hoje em dia as animações em forma de blob excitam as mentes das equipes criativas. O que você pode fazer? O comportamento líquido é irresistível. A rotina de morphing que mostra como uma grande queda se move suavemente no espaço conquista facilmente o público on-line e coloca seu site na liderança.

Para se beneficiar dessa técnica convencional, oferecemos a você uma coleção de trechos de código excelentes que lhe darão uma dica de como construir sua própria animação em forma de blob. Você pode fazer isso com ferramentas tradicionais ou novas. Agora, vamos encontrar a combinação perfeita para o seu próximo projeto.

Animação de blob por Uwe Chardon

A opinião de Uwe Chardon sobre esta solução popular é prática e inspiradora. Apresenta uma bolha simples e plana com uma bela coloração laranja e bordas lisas colocadas em um ambiente limpo. Ele conseguiu imitar muito bem o comportamento líquido.

O resultado é uma combinação vencedora de uma forma simples e comportamento intrincado que parece bastante impressionante.

Veja a animação Pen Blob puro CSS de Uwe Chardon

Blob de Ashton Holgate

O exemplo anterior descreve um tipo tradicional de blob com forma irregular e morphing relativamente expressivo. No entanto, este projeto de Ashton Holgate adere a uma forma mais divina, que quase faz fronteira com o círculo, e as mudanças são quase imperceptíveis. No entanto, também parece excelente.

Mais ainda, o artista também brincou com o texto, obrigando-o a mudar sua cor para a oposta quando atinge a área da bolha.

Veja o Pen Blob de Ashton Holgate

Bouncing Liquid Loader de Fabio Ottaviani

Fabio Ottaviani colocou em prática a natureza lúdica do comportamento pegajoso que é inerente às animações de blob. Sua bolha é pequena, mas produz um grande impacto com sua adorável transformação e salto engraçado.

Embora a placa de identificação do projeto da caneta leia “Loader”, ela pode ser facilmente transformada em um detalhe decorativo do fundo. E para fazer isso tudo que você precisa saber é HTML e CSS, já que o artista não usa nenhuma mágica de JavaScript. Inteligente.

Veja o Pen Bouncing Liquid Loader de Fabio Ottaviani

Teste de Blob de Tela por Shaw

Ao contrário do exemplo anterior, essa queda é gerada puramente por JavaScript. Portanto, esteja pronto para mergulhar em uma solução emocionante e jogar intrincado com os gráficos. Além disso, o conceito difere dos demais por seu visual primitivo, além de um comportamento bastante suave e calmo que traz uma atmosfera geral serena.

É bastante universal e neutro. Assim, poderia se tornar uma animação de fundo perfeita para vários projetos.

Veja o teste de caneta Canvas Blob por Shaw

Blob de Jeffrey

Esta solução de Jeffrey é uma combinação vencedora de duas tendências. Aqui, você pode encontrar um fundo irregular que é muito popular nos dias de hoje e o comportamento líquido que prevalece sobre as outras opções.

O trecho de código é feito com HTML, CSS e JavaScript. Parece consistente em vários navegadores e dispositivos. O artista usa um algoritmo básico de mola que faz a interação com o enorme blob parecer real e não artificial.

Observe que, embora o blob ocupe metade da cena, ele não domina os espectadores. O comportamento suave e sereno está por trás dessa discrição.

Veja o Pen Blob de Jeffrey

Blobs de Charlotte Dann

Se um blob não for suficiente para produzir uma impressão adequada, você sempre poderá optar por uma dúzia deles. Charlotte Dann, com seu engenhoso trecho de código, mostrará como fazer isso sem arruinar o efeito geral e sobrecarregar os visitantes.

Seu trecho de código é apenas um deleite para os olhos. Ele apresenta muitas pequenas bolhas em movimento que interagem entre si. Cada um parece um pequeno ponto de luz. Juntos, eles formam uma enorme bolha que exala calor em todas as frentes.

Veja os Pen Blobs de Charlotte Dann

Agora, vamos passar do mundo plano para um tridimensional.

Blob de Georgi Nikoloff

Blob por Georgi Nikoloff é um ponto em caso. Imediatamente chama a atenção com sua coloração vibrante, aparência de alta tecnologia e comportamento dinâmico. O desenvolvedor aproveita ao máximo as tecnologias avançadas, usando WebGL, GLSL e shaders a seu favor. Embora a solução esteja sujeita à compatibilidade do navegador, parece inspiradora.

Veja o Pen blob de Georgi Nikoloff

Experimento nº 6 por Daniel Del Core

Daniel Del Core mostra ao público online como brincar com o ruído Simplex e enfeitá-lo com algumas texturas reproduzidas com atenção. O resultado é uma bola de pintura inspirada em doces. Embora se mova muito rápido, é tão fascinante que é difícil tirar os olhos dele imediatamente.

Veja o Experimento da Caneta nº 6 de Daniel Del Core

Bolha de partículas falsa por Eli Fitch

Ao contrário do exemplo anterior, que tem uma personalidade ousada e o carisma de uma estrela pop dos anos 80 obcecada por spandex, este parece uma coisa do futuro techno modesto. O blob é construído a partir de pequenas partículas que se tornam mais brilhantes sob alguns ângulos para obter uma aparência 3D.

Previsivelmente, o artista emprega a magia do Three.js e alguns trabalhos engenhosos com textura processual para obter esse conceito.

Veja a gota de partículas falsas Pen #3December de Eli Fitch

Gerador de Blobs CSS por Edwin Chen

Vamos terminar nossa coleção com CSS Blob Generator de Edwin Chen. Como o título indica, esta caneta apresenta um pequeno playground onde você pode criar uma forma de bolha.

Aqui você encontrará um pequeno painel onde você pode atribuir um raio a cada borda. Embora seja estático e plano, você pode facilmente copiar o resultado e colocá-lo em movimento com a ajuda do JavaScript.

Veja o gerador de blob CSS da caneta por Edwin Chen

A forma perfeita para uma atmosfera calmante

Não é de surpreender que a natureza suave e calma do comportamento líquido esteja se tornando popular nos dias de hoje. Como um pequeno riacho hipnotizante que atravessa a floresta, ele atrai você e serve como uma ilha de serenidade no mundo online em constante mudança.

As animações baseadas em blob destinam-se apenas a beneficiar projetos modernos. Eles são discretos, embora certamente chamem a atenção. Quer você opte por uma realização elegante e plana ou 3D extravagante, ela estabelecerá facilmente uma atmosfera calma.

Enriquecerá a experiência, enfeitará o fundo e, ao mesmo tempo, dará lugar ao conteúdo. Esses planos de fundo ajudarão você a manter o equilíbrio entre dados visuais e textuais.