SummArg | Cursos y recursos para webmasters

15/05/2012

Scrolling con jQuery muy simple

PageScroller es un plugin jQuery que nos permite insertar scrollers (pestañas que al desplazarse cambian de status) y sus respectivas acciones de forma simple. Incluye una barra de navegación para activar, desactivar y cambiar de ubicación tal como en el ejemplo, íconos minimalistas para dicha barra, una barra de navegación horizontal y flechas para la navegación. Es apto para dispositivos móviles y anuncian la pronta llegada de un plugin WordPress para su mejor integración (pero nosotros no lo necesitamos, ya que gracias al taller aprendimos a integrar estos plugins a nuestros themes).

Para utilizarlo basta con descargar el pack, vincular jQuery y el plugin al documento.

<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/pagescroller.js"></script>

Inicializamos el script

<script type="text/javascript">
$(document).ready(function(){
$('#main').pageScroller();
});
</script>

Y, entre etiquetas <script>, renombramos los links de navegación

var navLabels = new Array('Inicio', 'Portfolio', 'Servicios', 'Contacto');
$('#main').pageScroller({ navigation: navLabels });

La descarga incluye un demo completo para facilitarnos la tarea.

Demo | Descarga

Dejar un comentario