scrollTo con easing

Banditolane · #1 (**permalink**) 17/08/2010, 15:09

Buenas a todos!

La web con la que estoy ahora utiliza el plugin scrollTo de jQuery para desplazarse entre las secciones. Pero lo hace de forma brusca y poco atractiva visualmente hablando. Por lo que sé, se puede emplear otro plugin llamado easing, pero no sé más que eso, y en la web donde lo encontré no es que se explique muy bien como usarlo, al menos yo no he logrado implementar el scrollTo con él... Os pongo el código que uso actualmente y el que no me funciona:

Código:

/* ESTE SI ME FUNCIONA */
$("#btn").click( function() {
     
     $.scrollTo( {top:0, left:0}, 2500);

});

/* ESTE NO */
$("#btn1").click( function() {
    
     $.scrollTo( {top:0, left:0},{
        duration:2500,
        easing:method
     });

});

Bueno, el que no funciona es que el que he sacado de la página del plugin easing. Os pongo un ejemplo de lo que quiero conseguir por si sirviera de ayuda:

http://www.bountybev.com/home.html

Esa es un poco la idea, que vaya de menos a más y que lo haga progresivamente y no a "saltos" como me lo hace a mi, para sacar el máximo partido del movimiento del scroll... Si alguien lo ha usado antes o sabe controlarlo que me eche un cable pls.

Muchas gracias y un saludo!

climax2006 · #2 (**permalink**) 17/08/2010, 17:33

http://demos.flesler.com/jquery/scrollTo/
ahi esta lo k buscas

$(...).scrollTo( 0, 800, {queue:true} );

Banditolane · #3 (**permalink**) 18/08/2010, 18:30

Vale, muchas gracias. La parte del easing esta resuelta! Ahora lo que no consigo es introducir el .stop() para que se detenga al hacer scroll con el ratón o al pulsar sobre otro botón... Se me ocurre que quizá metiendo el scrollTo en una función y luego con setTimeout y clearTimeout a lo mejor se puede hacer, o algo parecido no? Se agradece cualquier idea: gracias!

Un Saludo!

caricatos · #4 (**permalink**) 18/08/2010, 19:55

Tema movido desde javascript

Banditolane · #5 (**permalink**) 19/08/2010, 04:05

Todo funcionando y perfecto. Muchas gracias por la ayuda amigos! Os pongo el código para las 2 cosas para aquellos que tengan la misma duda puedan verlo y adaptarlo:

Código:

$('#btn').click( function() {
     
     var destination = 0;
     $("html,body").stop().animate({
     scrollTop: destination
     },5000, 'easeInOutCubic');
     return false;                    

});

Con este código, y los plugins de jQuery scrollTo (http://plugins.jquery.com/project/ScrollTo) y easing (http://gsgd.co.uk/sandbox/jquery/easing/) se consigue un efecto scroll automatizado muy atractivo. en la variable "destination" ponemos el punto exacto al que queramos que se dirija el srcoll. Espero que os sea until

Gracias y un saludo!

MoDoRrO · #6 (**permalink**) 29/09/2010, 16:44

hay we... por mas que intento no puedo :S
tengo esto:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Prueba de jQuery</title>

    <script src="../jQuery/jQuery.js" type="text/javascript"></script>
        <script type="text/javascript">
$('#btn').click( function() {
     
     var destination = 0;
     $("html,body").stop().animate({
     scrollTop: destination
     },5000, 'easeInOutCubic');
     return false;                    

});
        </script>

    </head>
 <body>
    <a href="#btn"> Presioname! </a>
    <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>