Hoje resolvi tentar uma coisa diferente, algo que sempre quis fazer: criar um efeito de ondas na praia usando HTML e CSS. Vou contar pra vocês como foi essa saga, desde a ideia até o resultado final.
Primeira Tentativa: Só com CSS
Comecei pesquisando um bocado, vendo uns tutoriais e tal. Achei umas coisas interessantes sobre como usar gradientes e animações em CSS pra simular o movimento das ondas. Fui logo abrindo o editor de texto e começando a rabiscar uns códigos.
Criei um div pra representar a praia e outro pro mar. Usei um gradiente linear pra fazer o azul do mar, variando a cor pra dar uma ideia de profundidade. Tentei usar a propriedade animation do CSS pra fazer o gradiente se mover, simulando as ondas.
- Resultado: Ficou meio tosco, pra ser sincero. As ondas não tinham movimento natural, parecia mais uma coisa piscando.
Segunda Tentativa: Adicionando um pouco de SVG
Pensei: “Preciso de algo mais fluido, mais orgânico”. Pesquisei mais um pouco e descobri que o SVG (Scalable Vector Graphics) poderia ser uma boa pedida. Ele permite criar formas vetoriais que podem ser animadas de forma bem suave.
Criei um path SVG com várias curvas, imitando o formato de uma onda. Usei a propriedade d do path pra definir o desenho da onda. Coloquei esse SVG dentro do div do mar e comecei a brincar com as animações.
Usei a propriedade transform do CSS pra mover o path SVG horizontalmente. Combinei isso com a animação da propriedade d, alterando sutilmente as curvas da onda pra dar a impressão de movimento.
- Resultado: Melhorou bastante! As ondas ficaram mais suaves, com um movimento mais natural. Mas ainda não tava perfeito.
Terceira Tentativa: Refinando as Animações
Percebi que precisava adicionar mais detalhes pra deixar o efeito mais realista. Decidi criar várias camadas de ondas, cada uma com um tamanho, velocidade e transparência diferentes.
Copiei e colei o path SVG várias vezes, modificando um pouco o desenho de cada um. Ajustei a propriedade animation-duration pra cada camada, fazendo com que algumas ondas se movessem mais rápido que outras.
Adicionei uma leve transparência em algumas camadas, pra dar uma sensação de profundidade e sobreposição.
- Resultado: Agora sim! O efeito ficou bem mais convincente, com várias ondas se movendo de forma independente e criando uma sensação de movimento contínuo.
Fiquei bem satisfeito com o resultado final. Claro, dá pra melhorar ainda mais, adicionar uns efeitos de espuma, um solzinho brilhando, mas por hoje chega. Aprendi bastante sobre animações em CSS e SVG, e o mais importante: me diverti no processo!