Criar efeito Bounce

[Douglas Julião 34]

Galera alguém ai sabe explicar mais ou menos como funciona a lógica do efeito Bounce, para dar aquela tremida no elemento?

Eu criei um efeito slide simples tulizando esse código:

effect: function(eff,pos,time,direction){
		switch(eff){
			case 'slide':
			if(direction === 'left'){
				var left = pos;
				var slide = setInterval(function() {
				    left  += 5;
				    for(var i = 0; i < numSlides; i++){
				    	images[i].style.left = left + 'px';
				    }
				    if (left === 0) clearInterval(slide);

				},time);
			}else if(direction === 'right'){
				var right = pos;
				var slide = setInterval(function() {
				    right -= 5;
				    for(var i = 0; i < numSlides; i++){
				    	images[i].style.left = right + 'px';
				    }
				    if (right === 0) clearInterval(slide);

				},time);
			}
			break;
			case 'bounce':
				//vou criar aqui :)
			break;
		}
	}

Não precisa nem de código eu só queria um auxilio para entender de onde devo partir para faze-lo, eu estou fazendo um slide para aprendizado ai queria criar esse efeito na transição.

Obrigado!

[angelorubin 142]

Veja se ajuda - http://javascript.info/tutorial/animation#bounce

[wilnet 92]

Olá Douglas,

 

Essa Vídeo Aula, lhe ajudará.

 

Tb tem um bom Exemplo explicando seu uso.

 

até +

[Douglas Julião 34]

angelorubin eu estava fazendo por ai só que eu queria entender a lógica por traz saca?!

Wilnet eu queria fazer apenas com javascript, apenas para aprendizado mesmo.

Obrigado gente, vou continuar procurando alguma solução se encontrar postarei aqui.

[angelorubin 142]

Da uma boa olhada no site que te passei, pois ele aborda bem do começo a explicação sobre animação.

http://javascript.info/tutorial/animation#the-basics-of-the-animation

[Douglas Julião 34]

Opa eae galera, então eu fiz o efeito do meu jeito mesmo rsrs... mas eu segui os conceitos desse site que o angelorubin passou, eu vou deixar o código aqui ficou mais ou menos assim:

case 'bounce':
        if(direction === 'left'){
	     var left = pos,
		 distanceBounce = 30;
	     var bounce = setInterval(function(){
		 left += 5;
		 var randomDist = Math.round(Math.random()*distanceBounce);
		 for(var i = 0; i < numSlides; i++){
			images[i].style.left = left + 'px';
			images[i].style.top  = randomDist + 'px';
		 }
		 if(left === 0){ 
			randomDist = 0;
			clearInterval(bounce)
		 };

	     },time);	
	}
break;

ai eu chamei assim:

Slide.effect('bounce',-400,10,'left');

Obrigado pela ajuda pessoal :)

a e se alguém quiser ver o código completo está aqui:

https://github.com/dougjuliao/Slideshow-pure-javascript/blob/master/js/script.js

 

partiu fazer novos efeitos haha...