Efecto divertido para darle vida al scroll (jQuery)

Todos conocemos la funcionalidad de «volver arriba» que muchos diseñadores y programadores utilizan en sus sitios. Esta pequeña implementación resulta útil para aquellos sitios web con mucho contenido que buscan mejorar la experiencia del usuario que llega al final del documento y desea retornar al encabeza sin tener que desplazarse por todo el sitio manualmente.

Existen muchas formas de realizar este trabajo, la forma de hacerlo más sencilla es un enlace que referencia al identificador de un div. Esta manera, que es de lo más sencilla puede ser un poco brusca, para mejorar el resultado podemos utilizar jQuery junto a AnimateScroll.

AnimateScroll es un plugin que mejora estéticamente la forma en que el navegador retorna al comienzo del documento, permitiendo hacerlo mediante el uso de divertidos efectos.

scroll animado con efectos y jQuery

La forma de emplear este plugin requiere apenas unas lineas de código:

$('#section').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});

En el ejemplo se puede ver perfectamente los parámetros utilizados:

  • #section: representa el identificador del div a donde queremos dirigir el scroll.
  • scrollSpeed: La velocidad con la que se realiza el movimiento del documento.
  • easing: el efecto que deseamos utilizar.

Falta otra opción, padding,que permite ajustar con excelente precisión la ubicación exacta donde queremos ubicar al usuario una vez finalizada la ubicación. Esta opción permite la utilización de números negativos.

Web: AnimateScroll

Categorizado en: