4 truques modernos de fundo para experimentar
Parece que, como constituinte de um projeto, os fundos vivem nas sombras; no entanto, isso não é inteiramente verdade. Nos tempos em que o CSS só começou a dar seus primeiros passos em direção à conquista do mundo, o pano de fundo já havia assumido o papel de elemento decorativo principal do site.
Hoje em dia a situação não mudou drasticamente. Na maioria dos casos, serve como uma força motriz visual primária que faz uma contribuição importante para o tema geral.
Tradicionalmente, fotos e vídeos são as primeiras escolhas para o cenário. O fato é que elas são seções de herói superpovoadas: todos os outros sites cumprimentam o público on-line com um cenário baseado em imagem ou filme. E isso faz com que a Web (e sua interface em particular) seja bastante semelhante, resultando em uma experiência antecipada do usuário.
Uma saída é encontrar novas soluções, explorando as novas técnicas e brincando com CSS3, HTML5 e JavaScript. Na verdade, há uma tendência perceptível de ir para essas opções. Há pelo menos quatro origens dinâmicas modernas diferentes que participam de uma competição para conquistar seu lugar no sol nos dias de hoje.
Vamos olhá-los:
Animação de Partículas
Animação de partículas é uma das escolhas mais populares no momento. Muitos sites adotaram com sucesso esta elegante solução inspirada no cosmos. Funciona bem em combinação com tela de cor sólida simples, ilustração, desenhos vetoriais e até fotos.
Além disso, a animação varia. Pode ser um conjunto de pontos de movimento caótico espalhados por toda a página para imitar o céu estrelado ou a chuva de estrelas, ou soluções com temas de constelação, nas quais você pode conectar círculos com linhas finas. E isso não é tudo; às vezes é emparelhado com os efeitos desencadeados pelos eventos de foco do mouse: nesse caso, você é capaz de afastar as partículas, formar redemoinhos a partir delas, anexá-las ao cursor como uma trilha, etc.
Huub é um exemplo da animação típica de partículas. Ele possui um conjunto de pontos em movimento que combina perfeitamente com uma coloração escura e um mapa colocado na parte de trás. Use o cursor do mouse para se divertir.
Dica: Se você quer se familiarizar com o fundo do cabeçalho dinâmico do Huub, então você deve dar uma olhada no projeto criado por Dominic Kolbe chamado demonstração de paralaxe de mouse . Parece quase o mesmo. Mas se você precisar de uma solução imediata, então a biblioteca JavaScript de Vincent Garreau é chamada Particles.js é o que você está procurando.
Ondas de partículas
Enquanto no exemplo anterior, o efeito pode ser alcançado com as manipulações inteligentes com HTML5 e CSS3 e com uma pitada de magia de JavaScript, este é um experimento engenhoso com a biblioteca Three.js. Com suas formas arqueadas e movimentos suaves, lembra facilmente uma das pequenas marés. Cria uma sensação de uma tela de respiração. Você pode usar o cursor do mouse para girá-lo em diferentes direções, explorando-o horizontalmente e verticalmente.
StuurMen tem uma seção simples e refinada de "boas-vindas". É mínimo, limpo e requintado. O conteúdo entra discretamente no campo de visão, enquanto o fundo pulsante estabelece um clima correto para o projeto.
Dica: aqui você pode encontrar um roteiro original de ThreeJS e sua adaptação bem sucedida por Deathfang com um demo chamado canvas three.js - partículas - ondas .
Mouse Paralaxe
A paralaxe em camadas é outra tendência crescente. Junto com a animação de partículas, ela pode transformar um fundo estático sem brilho em uma composição com um sentimento 3D sutil. O melhor é que você não precisa abandonar a sua escolha de imagem favorita, basta usar o parallax para enfeitá-lo um pouco.
É muito benéfico quando você precisa animar o título, o logotipo, a cena surreal ou a ilustração. Também é adequado para várias animações abstratas. Acionado por um evento padrão do mouse, ele não apenas adiciona outra dimensão, mas também permite que os usuários joguem com o ambiente.
O portfólio pessoal de Alexandre Rochet tem uma excelente página inicial. Não só o comportamento chama a atenção, mas também a pairallax do mouse faz as letras mudarem.
Dica: Existem inúmeras bibliotecas e trechos de código viáveis para gerar paralaxe. Um dos mais populares é um plugin criado por Matthew Wagerfield chamado Parallax.js . No entanto, se você precisar vê-lo na prática, especialmente aplicado à tipografia, então você pode explorar uma caneta por Frontnerd que apresenta sua visão de um Paralaxe 3d no rato .
Experimentos WebGL
Os experimentos WebGL são, naturalmente, uma variante para desenvolvedores e clientes sofisticados e sofisticados com um orçamento generoso. Eles podem ser brilhantes, inspiradores e um pouco pomposos. Vale a pena cada centavo. No entanto, há sempre uma mosca na pomada. Com grande poder, vem uma grande responsabilidade e, com o WebGL, você nunca deve esquecer a quantidade de recursos que consome e a falta de compatibilidade total com o navegador.
Solarin é tudo sobre uma experiência de usuário inesquecível e alucinante. É uma experiência 3D WebGL que é rica em vários recursos interessantes e inovadores. O fundo do cabeçalho é uma enorme esfera futurística que responde ao cursor do mouse e cria uma tremenda impressão.
Dica: Embora imitar o que os gênios do MediaMonks fizeram é diabolicamente complicado, na Web, você sempre pode encontrar um ponto de partida que lhe dê uma boa ideia. Considere o API WebGL e este codepen de Yoichi Kobayashi que surgiu com um projeto chamado “A esfera de contorção” .
Conclusão
Considerando que a utilização de imagens e vídeos é uma maneira comprovada e menos dolorosa de embelezar os antecedentes, ainda existem outras opções promissoras e experimentais que podem obter o resultado desejado. Ficar longe das banalidades é desafiador e até consome dinheiro, mas essas medidas são justificadas e bastante razoáveis.
Quer se trate de uma animação de partículas simples, mas elegante, ou de um extraordinário experimento WebGL, ela insere uma nova vida em um detalhe central da interface, dando ao seu site uma vantagem inicial.