Incorporar um plano de fundo animado ao seu site ou aplicação pode ser um diferencial marcante no design, conferindo-lhe uma identidade singular e cativante. Fundos criativos têm o poder de evocar emoções e aprimorar a interação do usuário.
Há diversas formas de implementar um plano de fundo animado para sua aplicação, mas uma solução eficaz e simples envolve o uso combinado de HTML e CSS. Explore este exemplo, compreenda seu código e veja uma demonstração prática do resultado final.
Estrutura HTML: O Primeiro Passo
Neste projeto, criaremos um fundo azul com bolhas que se expandem e flutuam em direção ao topo. Você pode observar o resultado final neste Codepen.
Inicie criando uma seção com a classe “wrapper”, que servirá como recipiente para a animação.
Em seguida, insira 10 divs, cada uma representando uma bolha. Dentro de cada div, inclua um span com a classe “dot”. Caso seja iniciante em HTML, você pode aprender os fundamentos destas tags em apenas 10 minutos.
<body>
<section class="wrapper">
<h1>Fundo Animado</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Estilizando com CSS: Dando Vida ao Fundo
Apesar de ser possível criar efeitos de fundo interessantes usando apenas HTML, neste projeto utilizaremos CSS para estilizar e animar o plano de fundo.
Inicialmente, zeramos a margem e o preenchimento para garantir que não haja espaços indesejados ao redor do fundo.
* {
margin: 0;
padding: 0;
}
Em seguida, aplicamos estilos à seção principal através da classe “wrapper”. Esta seção terá 100% de largura e altura para ocupar toda a página. Definimos a cor de fundo como um tom de azul e atribuímos uma posição absoluta.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Estilizamos o elemento H1 com posicionamento absoluto também. Para centralizá-lo na página, começamos definindo sua posição superior esquerda em 50%. Em seguida, utilizamos a função “translate” para movê-lo para cima e para a esquerda, assegurando que seu centro esteja precisamente no meio.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
Estilizamos as divs que se tornarão círculos, simulando bolhas animadas. Cada div terá altura, largura e borda. O raio da borda elevado garante o formato circular. Além disso, definimos a duração da animação utilizando a propriedade “animation” do CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Estilizamos os pontos com altura e largura de 5px. Atribuímos um raio de borda para torná-los circulares e um fundo branco. Posicionamos cada um de forma absoluta, próximo ao canto superior direito de sua div pai.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Utilizamos o seletor “nth-child” para posicionar cada div com configurações distintas. A animação será nomeada “animate”, sendo definida posteriormente com @keyframes.
O seletor “nth-child(2)” é utilizado para selecionar a primeira div, pois o primeiro filho do elemento .wrapper é o h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Atribuímos porcentagens maiores às divs inferiores para que subam ao topo em intervalos diferenciados.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Com @keyframes, realizamos transformações graduais e rotações nos círculos e pontos em intervalos distintos. No código abaixo, os pontos giram 70 graus e os círculos 360 graus. Essa rotação cria o efeito de bolha.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Você pode aprimorar ainda mais seus planos de fundo com o uso de padrões CSS. Os padrões possibilitam a criação de ondas, grades, folhagens e outras formas que contribuirão para animações ainda mais fascinantes.
CSS: Uma Paleta de Animações
O CSS oferece uma vasta gama de possibilidades para criação de animações, incluindo a alteração da cor de fundo e o controle do tempo de execução de uma animação.
Também é possível definir a frequência com que uma animação deve se repetir, inclusive até o infinito. O sentido de movimento também pode ser especificado, tanto para frente quanto para trás. É interessante experimentar com animações, pois elas podem agregar dinamismo e vida aos seus aplicativos.