Hola
302bis,
Panino5001.
Ahora que el planteo está hecho distinto, y hasta que lo cambies de nuevo, aprovecho para comentar que ese efecto ya está muy usado y visto y explicado desde hace años, porque se hace simplemente con CSS.
Sin embargo, la imaginación de los diseñadores hace milagros, y siempre se puede inventar alguna forma nueva de usar una posición fija (en este caso de una bolita) mientras se desplaza el documento hacia abajo (bueno, también hacia arriba).
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
body, html {padding: 0; margin: 0; height: 100%; }
table {width: 100%; height: 110%}
#izq {width: 50px; background-color: #008000; }
#der {width: auto; background-color: #008000; text-align: center;
font: bold 50px/200% sans-serif; }
#bola {width: 30px; height: 30px; border-radius: 50%; background-color: #000080;
position: fixed; left: 62px; top: 50%; box-shadow: 3px 3px 4px #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#808080')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#808080'); }
#tubo {width: 20px; border-width: 0 15px 0 15px; background-color: #800000;
border-style: inset; border-color: #800080; }
</style>
</head>
<body>
<table cellpading=0 cellspacing=0 border=0><tbody><tr>
<td id=izq></td> <td id=tubo><div id=bola></div></td> <td id=der>
F<br>O<br>R<br>O<br>S<br> <br>D<br>E<br>L<br> <br>W<br>E<br>B<br>.</td>
</tr></tbody></table>
</body>
</html>
Con javascript se puede mejorar la animación, hacerla más creíble o menos "rígida", pero basicamente es lo mismo.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
var espera;
function vibra() {
var despl = Math.floor(Math.random() * 5);
return despl;
}
function rueda() {
document.getElementById("bola").style.left = 58 + vibra() + "px";
document.getElementById("bola").style.top = 46 + vibra() + "px";
}
onscroll = rueda;
</script>
<style type="text/css">
body, html {padding: 0; margin: 0; height: 100%; }
table {width: 100%; height: 110%}
#izq {width: 50px; background-color: #008000; }
#der {width: auto; background-color: #008000; text-align: center;
font: bold 50px/200% sans-serif; }
#bola {width: 30px; height: 30px; border-radius: 50%; background-color: #000080;
position: fixed; left: 62px; top: 50%; box-shadow: 3px 3px 4px #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#808080')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#808080'); }
#tubo {width: 20px; border-width: 0 15px 0 15px; background-color: #800000;
border-style: inset; border-color: #800080; }
</style>
</head>
<body>
<table cellpading=0 cellspacing=0 border=0><tbody><tr>
<td id=izq></td> <td id=tubo><div id=bola></div></td> <td id=der>
F<br>O<br>R<br>O<br>S<br> <br>D<br>E<br>L<br> <br>W<br>E<br>B<br>.</td>
</tr></tbody></table>
</body>
</html>
Y por favor, dejen de mentir que "buscaron en la web"; porque ya no les creemos.
Que usan para lograr este efecto? Edit :
Me olvidé que las esquinas redondas no se ven en IE. Quizá con el prefijo "-ms-" en la versión 9.
O mejor prueben en otros navegadores