Banner animado em HTML5

[rikaschmitt 54]

Boa tarde.

 

Quando se fala em um banner animado em html5, o que é?

Fazer em flash, não pode.. e em gif, as vezes fica pesado. (alguns sites aceitam banner máx 40kb)

 

Quais alternativas?

[André do Vale 76]

SVG. Beautiful! :worship:

https://css-tricks.com/guide-svg-animations-smil/

 

http://tympanus.net/codrops/?s=svg&search-type=posts

 

Pessoas que tem demonstrando alguns trabalhamos excelentes na área:

https://dribbble.com/lbebber (brasileiro! Yeah! :coolio: )

http://sarasoueidan.com/

[rikaschmitt 54]

poisé, tem o SVG, mas nem seii lidar ainda... e tenho pouquissimo tempo, então aprender talvez nem role, pelo menos agora.

 

mas então, quando se diz animação html5, significa SVG?

[André do Vale 76]

Cara, não somente. Mas o caminho da padronização (quando falamos de animações complexas etc) creio que vá por ele.

 

O canvas já está em hiato praticamente, e o material abordando sobre ele tem ficado escasso e desatualizado (não com a documentação, mas com o desenvolvimento atual do mercado front-end).

 

Agora, é possível fazer muita (muita mesmo) coisa com CSS (puro) e com JS também.

 

http://24ways.org/2012/flashless-animation/

http://animateyourhtml5.appspot.com/pres/index.html?lang=en#20

http://animateyourhtml5.appspot.com/pres-css3-svg/index.html#42

 

 

Algumas ferramentas que 'automatizam' o processo:

https://creative.adobe.com/products/animate

http://tumult.com/hype/

http://framerjs.com/ (mockups mobile)

 

E: http://greensock.com/gsap (que, na minha opinião, possui a menor curva de aprendizado possível, e cria excelentes resultados).

[rikaschmitt 54]

É porque assim... digamos que uma agência me pede para criar um banner animado, mas que seja ou gif ou html5. Escolho html5, então o banner animado terá um arquivo .css, um arquivo .html, isso? Ou existe uma forma de colocar tudo em um único arquivo? E tipo, depois o pessoal da agência que se vira em implementar o banner no site?

 

Ainda tenho dúvidas na implementação do banner no site.

[André do Vale 76]

Dá pra fazer o CSS dentro do próprio HTML (<style>). Coloque as imagens em base64 de forma inline no CSS, e você terá apenas um arquivo.

[Lucas Santos Brito 12]

Um 'banner animado', nada mais é do que transições e efeitos em elementos, criados através de CSS, Javascript, ou até mesmo CSS puro e HTML.

Dá uma olhada nos links abaixo e verá que é bem mais simples do que parece:

 

http://forum.imasters.com.br/topic/507570-banner-rotativo-simples/

 

[rikaschmitt 54]

Ah, sim. Sobre como animar eu compreendo.. mas tinha dúvidas sobre a criação/implementação.

Mas outro porém sobre html5 é que, digamos assim, pode ser que nem todos os browsers aceitam né.

[André do Vale 76]

Faça um fallback então. Utilize toda a tecnologia disponível, e para IE8/7 ou menor, faça um gif aparecer.

 

Até o Google usa gif. Não é vergonha, e, dependendo do caso, não atrapalha a semântica e SEO. Ex.: https://mobileday.withgoogle.com/.

[rikaschmitt 54]

Então, por mim usaria gif mesmo, como na maioria dos banners publicitários que vejo.

Problema é quando pedem um banner cheio de animação, e dai o gif pode ficar pesado.

[Maujor 144]

Oi rikaschmitt
Em janeiro de 2013 lancei um desafio no meu Blog para replicar com CSS um banner do Google feito com FLASH.
Tive 7 soluções enviadas por leitores que bem demonstram as possibilidades das animações com CSS.
Talvez possam servir de inspiração para você. A matéria está neste link e nela há um link para as soluções recebidas.

[rikaschmitt 54]

Oi rikaschmitt

Em janeiro de 2013 lancei um desafio no meu Blog para replicar com CSS um banner do Google feito com FLASH.

Tive 7 soluções enviadas por leitores que bem demonstram as possibilidades das animações com CSS.

Talvez possam servir de inspiração para você. A matéria está neste link e nela há um link para as soluções recebidas.

 

Que legal!!

Pow, alguns banners ficaram muito bons!!

Vou estudar melhor as animações em CSS... tem muita coisa bacana pra fazer.

 

Valeu gente.

[rikaschmitt 54]

Em todos os casos, é bem dificil fazer um banner animado com algumas imagens e que tenha max 40kb?

fiz um gif aqui, mega simples.. e deu 80kb no mínimo.

[André do Vale 76]

Difícil não é. Se for GIF, há algumas maneiras de trabalhar com a paleta de cores e com a quantidade de frames para reduzir isto.

 

Posta aí pra gente ver como ficou.

[rikaschmitt 54]

Não posso postar aqui por questões de trabalho e permissão.

Mas consegui deixar com 53kb.

 

Olha, esse limite de 40kb precisa ser atualizado. Antigamente quando a internet era lenta, até era aceitável essa norma... mas 40kb é nada hoje em dia.

[André do Vale 76]

Sem ver a dita cuja fica difícil sugerir que caminho podes seguir. :/

 

Depois dá uma lida: http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/