Cambiar propiedades de una capa (style) al hacer scroll

shiryu · #1 (**permalink**) 08/08/2011, 08:49

Me gustaría saber cómo hacer que al desplazar el scroll del navegador en una página web cambien las propiedades de una capa, por ejemplo el top.

Me refiero a este tipo de efecto:
http://contrastrebellion.com/

Si os fijáis en esta web, tan buena, vemos que al hacer scroll el logotipo tiene algo de movimiento. El puño se desplaza hacia arriba y abajo y el semicirculo de atrás rota.

Veo en el código html que el "style:top" de la capa varía cuando haces el scroll por otro lado veo en la hoja de estilo que la capa tiene un top fijo y una posición absoluta.
Lo he visto en más páginas y quería saber cómo se hace.

Un saludo.

Panino5001 · #2 (**permalink**) 08/08/2011, 09:21

Está basado en algo así:

Código PHP:

  <!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=utf-8" /> 
<title>Documento sin título</title> 
<script type="text/javascript"> 
onscroll=function(){ 
    var sc=Math.max(document.documentElement.scrollTop,document.body.scrollTop); 
    if(sc>300) 
        document.getElementById('test').style.color='red'; 
    else 
        document.getElementById('test').style.color='green'; 
    document.getElementById('test').innerHTML=sc; 
} 
</script> 
 
</head> 
 
<body> 
<div style="position:fixed" id="test"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
 
</body> 
</html>

shiryu · #3 (**permalink**) 10/08/2011, 01:37

Gracias por tu ayuda! sigo pegándome con ello.

Un saludo.

ceSharp · #4 (**permalink**) 10/08/2011, 05:31

hola shiryu,
a lo mejor esto te vale. He buscado un poco por allí, un poco por alla, montado una función para mover un div por debajo de otro y al final me ha salido esto:

Código Javascript:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    //la variable s detecta si hemos dado a la rueda hacia arriba o hacia abajo
    var s;
function handle(delta) {
    if (delta < 0)
        s = "down";
    else
        s = "up";
    moverDiv();
}
 
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
function moverDiv()
{
    if(s=='down')
    {
        var bajar = parseInt(document.getElementById('rojo').style.top);
        if(isNaN(bajar))
        bajar=0;
        var topeAmarillo = parseInt(document.getElementById('amarillo').style.top);
        if(isNaN(topeAmarillo))
        topeAmarillo=0;
        //si el top de rojo es menor que el del amarillo lo bajamos 10px
        if(bajar < topeAmarillo)
        document.getElementById('rojo').style.top = bajar + 10;
        
    }
    else
    {
        var subir = parseInt(document.getElementById('rojo').style.top);
        if(isNaN(subir))
        subir=0;
        var topePagina=0;
        //si no está al principio de la página no lo subimos 10px
        if(subir!=topePagina)
        document.getElementById('rojo').style.top = subir - 10;
        
    }
}
 
/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;
    </script>
</head>
<body>
    <form id="form1" >
    <div>
    <div id="amarillo" style="z-index:2;top:180px;background-color:yellow;position:absolute;width:200px;height:100px"></div>
    <div id="rojo" style="z-index:1;left:60px;background-color:Red;position:absolute;width:100px;height:200px"></div>
    
    </div>
    </form>
</body>
</html>

si te vale esta página de ejemplo la única función que hay que 'tunear' sería la de moverDiv(), el resto es para detectar el movimiento de la rueda.

saludos.