HTML5: exemplos de animações e uso do aplicações gráficas2 min read

Categoria: HTML5

Por volta de 2011 o HTML5 começou a ganhar destaque. Lembro que na época, ainda se via muitas aplicações com animações rodando sobre o falecido Adobe Flash. O que era bom na époc, também era um “inferno”, pois este plugin tinha que estar sempre atualizado e muitas vezes não era porque implementaram uma nova funcionalidade, mas sim devido a vulnerabilidades que achavam… Mas, a internet evoluiu e o HTML5 surgiu e que maravilha: basicamente é possível fazer TUDO sem uso de plugins de terceiros, usando apenas as implementações do HTML5 (CSS, JavaScript, WebGL).  

Portanto, neste post irei mostrar 3 exemplos de aplicações que rodam apenas com uso do HTML5. Espero que possa servir de inspiração para seus projetos ou mesmo para dar uma ideia do que você pode fazer apenas com o HTML5 e suas implementações.

1. WebGL: simulação de  água

Você já deve ter lido algo sobre OpenGL, certo? Pois, com a vinda do HTML5 os navegadores puderam implementar uma biblioteca gráfica (a citada OpenGL) e com isso você pode usar os recursos de animação em 3D através de uma API JavaScript.

Veja o exemplo clicando aqui.

2. The Cloth Simulation

Com uso de canvas, que possibilita criar formas geométricas e programação JavaScript este exemplo faz a simulação de um tecido.

Veja o exemplo clicando aqui.

3. BreakDOM

Se você já jogou minigame ou mesmo o Atari vai lembrar do game Breakout. Nessa versão, o jogador utiliza uma barra de rolagem para controlar uma bola responsável por eliminar diversas caixas de seleção.

Veja o exemplo clicando aqui.

Fonte:

WebGL Org

https://webglsamples.org/

HTML5

https://www.w3schools.com/html/html5_intro.asp