Animation

[LeoO_DF 22]

Seguinte, eu quero fazer algo parecido a este site: http://www.gabrielcardial.com.br/#!main, você clica na imagem e as outras se retraem e abrem um quadrado no lugar delas com o conteúdo da pagina em questão, enfim eu consegui fazer as imagens se retrairem, mais usei animation então eu mudo as imagens e quando abre a box la para aparecer os textos e talz é como se as imagens anteriores ainda estive-sem lá, então o quadrado vai para baixo, alguém poderia me ajudar com a questão do Animation?

[dnielrodrigues 1]

Eu dei uma olhada rápida nesse site e pode ser que eu esteja enganado, mas me pareceu que esse recurso é 100% CSS3, nada de js.

 

Os recursos usados seriam as propriedades "transition" (para animações) e "target" (para os status de cada um e a url).

 

Se for este o caso, vc lê sobre target aqui

http://bernarddeluna.com/css/conhecendo-e-utilizando-o-css3-seletor-target/

 

e sobre transitions aqui

http://tableless.com.br/transition-e-animation/#.UhkM6GTwLQ0

 

Infelizmente com este método nada de funcionar no ie8- . Mas devem existir bibliotecas js que forcem essa funcionalidade (assim como algumas js forçam a funcionalidade dos responsivos).

 

Se vc achar algo assim não esqueça de postar a solução para ajudar a gente que quer usar css3 mas está preso pelo IeCA...

[LeoO_DF 22]

Eu dei uma olhada rápida nesse site e pode ser que eu esteja enganado, mas me pareceu que esse recurso é 100% CSS3, nada de js.

 

Os recursos usados seriam as propriedades "transition" (para animações) e "target" (para os status de cada um e a url).

 

Se for este o caso, vc lê sobre target aqui

http://bernarddeluna.com/css/conhecendo-e-utilizando-o-css3-seletor-target/

 

e sobre transitions aqui

http://tableless.com.br/transition-e-animation/#.UhkM6GTwLQ0

 

Infelizmente com este método nada de funcionar no ie8- . Mas devem existir bibliotecas js que forcem essa funcionalidade (assim como algumas js forçam a funcionalidade dos responsivos).

 

Se vc achar algo assim não esqueça de postar a solução para ajudar a gente que quer usar css3 mas está preso pelo IeCA...

 

Eu pensei nessa hipótese porem, teria como eu fazer o mesmo com Javascript, acho que seria melhor já que já tenho parte do código pronto :/

[dnielrodrigues 1]

Vc pode usar algo híbrido, ao mesmo tempo js e css3. Estou usando muito isso pelo fato de ter uma certa funcionalidade nos IE8-.

 

Por exemplo, quando clicarmos em um botão ele muda a classe do elemento x para "aberto" e a classe do elemento y para "fechado". Aí é só usar o transitions do css3 para a animação. Muito mais rápido e prático, e tbm muito fácil. Ficaria algo assim no js puro:

 

 

 

//alocar elementos em variaveis (boa pratica, facilita o trabalho)

var botaoX = document.getElementById("botao-x");

var elementoAlvo = document.getElementById("elemento-alvo");

//evento de clique no botao X

botaoX.onclick = function() {

//troca a classe para que o transition faça a animação

elementoAlvo.classList.remove("fechado");

elementoAlvo.classList.add("aberto");

}

 

 

Maior vantagem: A animação em CSS3 é muito mais fluída e mais leve que em js (jQuery então nem se fala, é muito pesado).

 

Desvantagem: No IE8 a funcionalidade ira acontecer, porém sem animação (que francamente é uma firula e completamente dispensável em comparação com o ganho de performance nos navegadores atuais, duplamente nos mobiles).

 

Venho empregando muito esse tipo de coisa porque acredito que não se pode penalizar os navegadores atuais para satisfazer totalmente os antigos. Essa opção fornece funcionalidade básica ao IE e otimização para os mobiles. Nunca é bom animar com jQuery nos mobiles.

 

Espero ter ajudado,