SmoothScroll mediante MooTools
Estoy seguro que al igual que yo muchos habéis visto en muchos sitios un efecto que ahora mismo está arrasando, la opción de al picar en determinado enlace de una web llevarnos hacia arriba o hacia abajo del sitio, pero no como cuando usamos anclas o anchors que el movimiento se produce de forma brusca si no haciendo el desplazamiento de forma suave. Este efecto se llama SmoothScroll y es tan usado por su vistosidad. Voy a explicar brevemente como conseguirlo mediante el uso de mootools gracias a un tutorial liberado por david walsh. Podéis ver una demo de lo que conseguiremos.
Lo primero será descargar MooTools 1.2. Una vez lo tengamos lo llamamos entre head y /head escribiendo también el siguiente código entre las mismas dos etiquetas:
<script type="text/javascript">
window.addEvent('domready',function() {
//smooooooth scrolling enabled
new SmoothScroll({ duration:900 }, window);
});
</script>
Solamente nos queda fijar las “anclas” como queramos. Supongamos que queremos un botón que nos baje hasta el final de la página, haríamos algo como esto:
Enlace: SmoothScroll Using MooTools 1.2
Posts relacionados
- Cheat Sheet Mootols 1.2
- Opacidad en imágenes mediante MooTools
- Moo.rd, motones de efectos con MooTools
3 Comentarios
Leave a comment
Este efecto es definitivamente muy util, y mootools hace muy facil implementarlo, pero me queda la duda de como hacer para que un enlace a una pagina con ancla, active el SmoothScroll al iniciar.
Es decir que funcione no solo con los links internos de una misma pagina sino que se active también al cargar otra página, una externa, que incluya el ancla en su url. He leido que se puede hacer llamando el evento onLoad, pero no he sabido como hacerlo.
Tu sabrías como?
Este efecto se llama SmoothScroll y es tan usado por su vistosidad
Gracias , si que necesitaba esto ya que muchos se confunden cuando usas anclas y piensan que cambiaron de página.
Saludos