Estrondo! Examinando Explosões em Web Design

Há muitas maneiras de chamar a atenção do público. Somos mimados com a escolha, mesmo que o estado atual das tecnologias ainda seja imperfeito. Estamos enfrentando alguns problemas de compatibilidade de navegadores e nem todos os dispositivos podem lidar com todas essas soluções grandiosas que os desenvolvedores da Web trazem para nós.

No entanto, os dias de sites estáticos em que as imagens eram a principal força motriz e os sliders com transições extravagantes eram o único tempero. Estamos testemunhando uma era de ideias ousadas e extravagâncias.

Um dos maiores aspectos é que os desenvolvedores não limitam seu foco a coisas grandes. Sim, podemos ver inúmeras animações de tela, experimentos de RV e vídeo impressionantes que exigem um modo de tela cheia, etc. No entanto, hoje mesmo os mínimos detalhes recebem sua própria dose de atenção.

Os sites estão repletos de soluções microscópicas, especialmente aquelas baseadas no cursor do mouse. Podemos tropeçar em inúmeras ideias inteligentes. São fantásticos, mas na maioria dos casos são (qual é a palavra que procuro?), “silenciosos”. Eu não estou falando sobre eles fazendo sons, já que algumas das soluções baseadas em mouse realmente fazem um som. Estou falando do comportamento deles.

Seu comportamento é suave, calmo e gentil. Em alguns casos, é tão transparente que é quase imperceptível. E se você estiver muito envolvido com o conteúdo ou se houver outros elementos de distração, é provável que você possa até ignorá-los. Então, por que não torná-los um pouco “mais altos”, para que os usuários não percam a oportunidade de apreciá-los?

Como fazer isso, você pode perguntar. Eu tenho uma boa solução: fazer as coisas explodirem – literal e figurativamente.

Partículas no espaço por Dean Wagman

Veja, por exemplo, este fantástico trecho de código criado por Dean Wagman. Embora este seja o primeiro experimento de tela realizado por Dean, é altamente inspirador. Tudo que você precisa fazer é clicar em qualquer lugar na tela, e você verá uma explosão de centenas de pequenas partículas brilhantes que estão voando diretamente em seu rosto. Mesmo que não faça um som, certamente parece tumultuado.

Veja a caneta
Partículas no espaço por Dean Wagman (@deanwagman).

Efeitos de explosão sempre despertam a sensação de que algo alto aconteceu. Então, por que não usar isso a nosso favor e adicionar algum ruído sem fazer um som real? Mais ainda, temos uma seleção de trechos de código fantásticos aqui. Vamos explorá-los juntos.

Explosão de partículas por Aleksei / Kaboomerz por Christopher Lis

Se a solução de Dean Wagman parecer um pouco demais, você sempre pode tentar a explosão de partículas de Aleksei. Ou se, pelo contrário, você precisar causar um impacto mais significativo, sempre poderá adotar o Kaboomerz de Christopher Lis.

O primeiro trecho de código apresenta uma versão “irmãozinho” da explosão de Dean, onde dezenas de pequenas partículas formam uma pequena explosão que rapidamente aparece e morre. No caso de Christopher Lis, você ficará surpreso com o tamanho das partículas. O confete que emerge do cursor do mouse é tremendamente enorme. No entanto, graças à sua curta vida útil, o efeito geral não é esmagador. É apenas agradável.

Veja a caneta
Explosão de partículas JS/CSS3 por Aleksei (@alek).

Veja a caneta
#Codevember 5 – Kaboomerz por Christopher Lis (@chriscourses).

Explosões DOM por David A.

Se você gosta dessa ideia, mas precisa de algo mais digital e com inspiração retrô, existe uma solução incrível criada por David. Ele usa retângulos de vários tamanhos em vez de círculos para obter um belo toque de 8 bits. Como resultado, podemos testemunhar uma pequena explosão com o carisma dos anos 80.

Veja a caneta
Explosões de DOM por David A. (@meodai).

WebGL Sparkles por CreateJS

Se você busca uma versão realista, o WebGL Sparkles by CreateJS é um exemplo perfeito a ser considerado. Mesmo que todas as partículas aqui sejam brancas, graças ao comportamento bem pensado, parece um verdadeiro tiroteio comemorativo quando você clica na tela. Além disso, o cursor tem um lindo rastro que dá um toque de magia à cena.

Veja a caneta
CreateJS: WebGL Sparkles por CreateJS (@createjs).

Lançador automático de fogos de artifício por Christopher Lis

Falando nisso, nossa coleção de explosões não estará completa sem uma dose de loucura pirotécnica. Automatic Firework Launcher de Christopher Lis é um exemplo fantástico a ser considerado. É um lançador de fogos de artifício de desenho animado. Graças a partículas coloridas e formas semelhantes a cravos, lembra os verdadeiros fogos de artifício que iluminam o céu estrelado.

Veja a caneta
Dia 29 – Lançador Automático de Fogos de Artifício por Christopher Lis (@chriscourses).

Conceito de destruição de janela modal da LegoMushroom

Os experimentos de tela não são os únicos em nossa lista. Os efeitos de explosão podem ser aplicados a vários elementos da interface, como uma janela modal. LegoMushroom tem uma prova vívida disso. Dê uma olhada no conceito de janela modal. Quando você fecha a janela, em vez de simplesmente desaparecer, ela se quebra em vários pedaços. É um complemento perfeito para todos aqueles sites extravagantes totalmente ilustrados que são bastante populares nos dias de hoje.

Veja a caneta
Conceito de destruição de janela modal por LegoMushroom (@sol0mka).

Efeito de explosão SCSS por Sylvain Garnot / explosão de texto SVG por Kacper Bawol / explosão de texto em tela por Tim Horwood

Os efeitos de explosão também podem ser benéficos para a tipografia. Considere o efeito de explosão SCSS de Sylvain Garnot, explosão de texto SVG por Kacper Bawol e explosão de texto Canvas por Tim Horwood.

Todos os três demonstram um efeito de explosão aplicado ao texto. Previsivelmente, o cursor do mouse aciona cada um.

Sylvain Garnot permite que os usuários explodam cada letra em uma centena de pequenos quadrados. O conceito de Kacper Bawol parece quase o mesmo, mas desta vez o símbolo se divide em pequenos triângulos. E, Tim Horwood permite que os usuários explodam todo o texto em pequenas partículas que eventualmente voltam e devolvem tudo ao seu estado original. Todas as três ideias são simplesmente incríveis.

Veja a caneta
SCSS – Efeito Explosão por sylvain garnot (@sylvaingarnot).

Veja a caneta
Explosão de texto Svg por Kacper Bawol (@Casperovic).

Veja a caneta
Explosão de texto em tela, clique para ver por Tim Horwood (@tdhorwood).

House Explosion por Ko.Yelie

O efeito de explosão também pode ser aplicado a imagens. Este conceito de Ko.Yelie é um ótimo exemplo. Ao clicar na imagem, você a explode em pequenos pedaços. Embora seja difícil encontrar um aplicativo para isso em interfaces da vida real, é sempre bom ter algumas soluções extraordinárias ao seu alcance que podem fazer com que coisas comuns pareçam únicas.

Veja a caneta
House Explosion por Ko.Yelie (@ko-yelie).

Um recurso explosivo

Um efeito de explosão é uma ferramenta controversa. Ele não é adequado para todas as interfaces existentes por causa de sua natureza “explosiva” e carisma poderoso. Mesmo que pareça inofensivo e até neutro quando aplicado em conjunto com o cursor do mouse, é bastante “barulhento” – então você precisa ser cauteloso.

Lembre-se, nem todas as pessoas buscam entretenimento em sites. E nem todo mundo está à altura de extravagâncias e impressões avassaladoras. No final do dia, o conteúdo sempre continua sendo o rei.

No entanto, se você estiver procurando maneiras incomuns de criar uma interação emocionante com o usuário que seja divertida e, por assim dizer, “barulhenta”, um efeito de explosão pode, sem dúvida, ser útil.