Controlando animações

[wneo 5]

Bom dia!!!

 

Venho a criar esse tópico com objetivo de obter conhecimento para controlar animações em Javascript e CSS.

O resultado que quero alcançar é de manipular objetos sequencialmente em uma página, interagindo com o usuário. Por exemplo:

 

1 - Temos um botão ao lado esquerdo da pagina e um círculo no centro da tela.

2 - Ao clicarmos no botão, ele deve disparar a função e fazer com que o círculo movimente-se até o topo da página.

3 - Chegando no topo da página, o circulo permanesse lá durante 10 segundos, e logo após dirigi-se automaticamente para o lado direito da página.

 

* Com jquery animate e CSS creio nessa possibilidade... gostaria de ajuda para chegar nesse objetivo, reunindo conhecimento para movimentar qualquer objeto coordenando funções e keyframes adequadamente.

Quem possuir interesse e quiser esboçar alguma idéia sobre essa questão, fico grato..é algo que quero dominar.

[Douglas Julião 34]

Em javascript seria legal você ver um pouco sobre 'setInterval' : http://javascript.info/tutorial/animation

 

Ja em jquery fica bem simples, eu fiz um exemplo utilizando o animation, se quiser eu posto aqui rsrs...

Eu uso o click no botão e ativo o animate no circulo para zerar o marginTop, depois adiciono outro animate para contar os 10 segundos ainda com o circulo marginTop zerado, em seguida adiciono outro animate para zerar o marginRight.

 

Provavelmente tem outras formas de fazer isso, mas essa foi a que eu fui fazendo e acabou saindo :)

[wneo 5]

Em javascript seria legal você ver um pouco sobre 'setInterval' : http://javascript.info/tutorial/animation

 

Ja em jquery fica bem simples, eu fiz um exemplo utilizando o animation, se quiser eu posto aqui rsrs...

Eu uso o click no botão e ativo o animate no circulo para zerar o marginTop, depois adiciono outro animate para contar os 10 segundos ainda com o circulo marginTop zerado, em seguida adiciono outro animate para zerar o marginRight.

 

Provavelmente tem outras formas de fazer isso, mas essa foi a que eu fui fazendo e acabou saindo :)

Oi Douglas!

Você conseguiu disparar toda animação com apenas 1botão? gostaria sim de ver como ficou esse que voce fez!!! =)

[Douglas Julião 34]

Se liga: http://jsfiddle.net/douglasjuliao/3pqjdaq5/

[wneo 5]

Se liga: http://jsfiddle.net/douglasjuliao/3pqjdaq5/

Nossa cara perfeito!!!! :worship:

 

Com esse raciocínio já dá pra fazer bastante coisa...eu ainda não tenho um projeto elaborado sobre a questão, estou estudando sobre essa manipulação para poder aplicar em alguns trabalhos, então pretendo postar mais coisas relacionadas nesse tópico. Caso você queira trocar mais idéias, acrescentar algo e até mesmo ajudar com posteriores duvidas minhas fico grato!

 

Obrigado por mostrar que é possível!