Tubería o camino con ScrollDown

302bis · #1 (**permalink**) 21/05/2012, 12:01

Hola, ya he buscado esta información en la red y no he podido encontrar nada. Les agradecería muchísimo, si me dieran un tip de como programarlo o de dónde encontrar algo similar a mis necesidades.

Lo que necesito es crear un camino que se valla colorizando (o llenando) a medida que hago scrolldown. Es decir a medida que giro la rueda del mouse (para cualquier sentido), la tubería o camino se va llenando o desllenando.

Espero haberme podido explicar bien.

Agradezco de antemano sus comentarios, Patricio.

Panino5001 · #2 (**permalink**) 21/05/2012, 13:19

Hola, Patricio, quizá deberías ser un poco más específico acerca de qué es lo que se te complica, porque no queda claro si es cómo capturar el movimiento de la rueda o cómo simular visualmente el llenado o el vaciado. También ayudaría ver qué es lo que has intentado.
Si tu duda es acerca del movimiento de la rueda quizá te sirva esto un poco:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#test{ background:red; color:#FFF; text-align:center; line-height:200px; width:500px; height:200px;}
</style>
<script>
var contador=0;
function $(x){return document.getElementById(x);}
function sc(delta,el){
     if (delta < 0){
        contador++;
     }else{
         contador--;
    }
    el.innerHTML=contador;
}
onload=function(){
    if (window.addEventListener)
        $('test').addEventListener('DOMMouseScroll', function(e) {
            if (e.preventDefault)
                e.preventDefault();
            sc(-e.detail,this);
            return false;
        }, false); 
    $('test').onmousewheel = function () {
        sc(event.wheelDelta,this);
        return false;
    }
}
</script>

</head>

<body>
<div id="test">Poner el mouse encima y mover la rueda</div>
</body>
</html>

302bis · #3 (**permalink**) 22/05/2012, 08:14

Ok, genial, muchísimas gracias por tu respuesta, creo que lo que me pasaste puede servir.

Para ser más claro, lo que necesito es que una bolita vaya vajando por una tubería cuando hago scrolldown. Es decir, la idea, es hacer una página muy [URL="http://ito.mx/PPiT"]larga[/URL] que posea una una tubería que va de arriba hacia abajo; y, al a medida que voy para abajo (hago scroll down) esta bolita va transitando hacia abajo.

Por desgracia no he encontrado algo similar, aunque de alguna forma sé que es muy comun =)

Muchas gracias y saludos!

furoya · #4 (**permalink**) 23/05/2012, 07:33

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

302bis · #5 (**permalink**) 24/05/2012, 00:25

Hola furoya! Muchas gracias por responder a mi pregunta. Creo que sigo sin explicarme correctamente.

La idea es que una tubería se pinte (se llene) de otro color a medida que se va haciendo scroll down.

Adjunto una imagen para explicarme mejor.