oscilamiento vertical

Wakkos · #1 (**permalink**) 11/03/2009, 17:02

Hola, tengo muuucho tiempo que no vengo y aunque he rebuscado faqs y utilizado la búsqueda no encuentro nada parecido. Mis nociones de JavaScript y DHTML son muy limitadas y quería crear un movimiento oscilante como este:

http://www.ozones.com/burning/

Pues si sabeis de algun script parecido a ese, quiero mover varias capas, pero que oscilen no mas de 10 pxls, o 30, controlar un poco la velocidad de oscilamiento y posicionarlas donde yo quiera.

Agradecería si sabeis de alguno por ahi a mano que pueda destrozar. El del Doc ozones es muy chungo para mis cortos conocimientos xD

prograficion · #2 (**permalink**) 11/03/2009, 22:34

Hola.
No se como hacerlo con javascript, pero si te metes en la libreria jquery veras que es muy facil crear este tipo de efectos y muchas cosas sorprendentes!

Saludos

Wakkos · #3 (**permalink**) 12/03/2009, 15:24

no encuentro nada parecido, imagino que tendré que ahcerlo y estudiarme todas las propiedasdes de Jquery, que coñazo xD

Panino5001 · #4 (**permalink**) 12/03/2009, 16:44

Bueno, acá tenés una punta para empezar:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#unico{ margin-left:300px}
#unico div{ background-color:#F00; width:100px; height:20px; margin:5px 0; position:relative}
</style>
<script>
function posicionar(padre,ang){
	var deplmax=30;
	var hijos=padre.getElementsByTagName('div');
	var paso=2*Math.PI/hijos.length;
	for(var i=0,obj;obj=hijos[i];i++){
		obj.style.left=Math.sin(ang+(paso*i))*deplmax+'px';
	}
}
onload=function(){
	var i=0;
	setInterval(function(){posicionar(document.getElementById('unico'),i++);},150);
}
</script>
</head>

<body>
<div id="unico">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

Wakkos · #5 (**permalink**) 12/03/2009, 17:40

Que crack!, aunque el movimiento es muy brusco, voy a ver si jugando con las matemáticas se puede suavizar para que parezca animación.

Panino5001 · #6 (**permalink**) 12/03/2009, 17:49

Así mejora:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#unico{ margin-left:300px}
#unico div{ background-color:#F00; width:100px; height:20px; margin:5px 0; position:relative}
</style>
<script>
function posicionar(padre,ang){
	var deplmax=50;
	var hijos=padre.getElementsByTagName('div');
	var paso=2*Math.PI/hijos.length;
	for(var i=0,obj;obj=hijos[i];i++){
		obj.style.left=Math.sin(ang+(paso*i))*deplmax+'px';
	}
}
onload=function(){
	var i=0;
	setInterval(function(){posicionar(document.getElementById('unico'),i+=.1);},15);
}
</script>
</head>

<body>
<div id="unico">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

Por ese lado van los tiros ;)

Wakkos · #7 (**permalink**) 12/03/2009, 18:24

perfecto ahora xDD estaba bien encaminado, pero te me has adelantado con todo!!! este funciona genial!!!