Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou fazendo esse site (link), onde tem como hover de 3 links uns gifs animados.
O grande problema é que os gifs ficaram em média com 850kb (20 frames cada), e isso tá gerando um certo atraso pra carregar as images nas conexões mais lentas.
O fato de as imagens estarem no hover ainda piorou mais a situação, pois elas não carregam junto com o site (e não dá pra usar a técica de mapa de imgs porque é um gif animado).
Queria saber de um método bom pra reduzir o tamanho dos gifs animados, free, e pra MacOSX de prefêrencia (se não rolar pra mac eu sou um jeito).
E também um método de preload válido.
Tentei um jQuery bem famoso que faz isso (link), mas ele tira o movimento dos gifs.
Vlw.
É que dificilmente eu utilizaria GIFs animados com quase 1MB http://forum.imasters.com.br/public/style_emoticons/default/excl.gif ainda mais para ser utilizado como background de um link... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
Eu também não.
Você faria em Flash?
Achei que seria mais pesado ainda um flash, então resolvi fazer os gifs.
Mas em flash tem preload.
Sim, mas o swf como um todo não seria mais pesado?
Acho que o peso não seria muito maior do que está agora.
Pois então.. acho que minha opção por fazer gif não foi tão ruim.
Não conhece um sistema free que reduz o tamanho de gifs?
Dificilmente um flash vai chegar à 800k... a sua animação é 'simples' do ponto de vista de um Movie Clip..
E se for analizar de verdade, só funciona 1 vez... da segunda em diante, já não corre certo.. pulando do primeiro pro ultimo frame do teu GIF.
Eu indicaria que você fizesse com Flash mesmo, certamente ficará com menos kbs
Ele tá funcionando só uma vez por causa do preload. O firefox encara como se eu quisesse rodar o gif até o final.
Mas acho que a melhor solução vai ser o flash mesmo. NAO QUERIA! :~~
Mas aqui entra justamente a diferença entre um GIF animado e um Flash: o peso! Um GIF, por ser uma imagem bitmap, cada frame é uma imagem, ou seja, se você tem 1 frame com aproximadamente 50KB, e seu GIF animado tem uns 20 frames, por exemplo, no final ele terá um tamanho de 1000KB... Já um SWF utiliza imagens vetoriais, cujo tamanho do arquivo é bem menor.
E outra coisa, você já pensou em utilizar o jQuery para movimentar o background? :mellow: Eu nunca fiz algo assim, mas dê uma pesquisada sobre isso... Dessa forma, você não precisa de um GIF animado, você pode ter sua foto em JPG mesmo (cujo tamanho final seria bem menor do que o GIF e a qualidade seria bem melhor) e com o mouseover você estaria movimentando a posição do background, controlando a propriedade background-position com o jQuery...
Pense nisso. E caso consiga, nos informe! Será um ótimo material de referência... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Valeu pela dica, Paulo. Não tinha pensado nisso.
Vou pesquisando aqui um plugin, e segunda-feira quando chegar na empresa eu implemento e posto aqui o resultado! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Só pra avisar o pessoal de que eu consegui fazer os efeitos usando jQuery.
Plugin: jQuery Background-Position Plugin
Foi bom também pelo fato de ter aprendido um pouco de jQuery para poder criar plugins próprios.
Abraços.
[RESOLVIDO]
Que legal que conseguiu resolver... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Mas, tenho algumas observações que deveria olhar com atenção: tente controlar melhor a questão do reinício do efeito... Quando acaba o movimento, legal, o background fica parado, entretanto, se eu tirar o foco do link e voltar o ponteiro do mouse sobre ele, a animação recomeça... O estranho está justmente aqui: o fato de ele recomeçar, está havendo uma mudança muito brusca da imagem exibida após a animação e a imagem exibida no começo...
Será que consegui explicar? :unsure:
Enfim, tente fazer algum efeito de retorno com um mouseout, ou então, quando a animação executar novmente, ela comece do ponto que parou, nesse caso, a imagem "voltaria"...
Ah! Tem também a questão de a animação ser executada o número de vezes que você passou o mouse sobre os links... Ou seja, mesmo depois de ter tirado o mouse do link, se eu tirei o foco do link e depois retornei o foco nele, digamos, duas vezes, a animação obrigatoriamente irá ser executada duas vezes... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
É isso. Bom trabalho amigo! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Pois é. Eu tinha notado esses defeitinhos já! ^_^
Inicialmenteo o script é muuuito básico, e eu tive que ficar olhando no API Browser do jQuery procurando aprender os seletorespara completaro "efeito". Acho que já foi um grande avanço, e não sei se eu vou ter tempo de deixar isso perfeito. :(
Vou gastar mais umas 2 horinhas tentando resolver isso.
Tem também o fato de que as pessoas nao irão ficar muito tempo nessa página, já que ela não tem quase nada de conteudo. O esperado é que a pessoa clique logo em umas das 3 opções e depois navegue pelo menu interno. =)
Valeu pelo apoio! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Testei com um script padrãozinho, e descobri que o "problema" é no Firefox.
Parece que ele encara o preload de tal forma que o gif (once) já aparece no ultimo frame. BIZAAAARRO!
Mas se for ver ele tá é certo. =/
Se alguém tiver uma solução eu ficarei bem feliz (esperava ao memos uma resposta do pessoal daqui do fórum).
Vlw.