Morton 6 de octubre de 2010 a las 13.31
   Imprimir artículo
elWebmaster.com

jQuery: Cómo crear un sitio navegable por completo en una sóla página


jqueryUn efecto atractivo y moderno que puedes utilizar en tu web es el que permite navegarla por completo con tan sólo el uso del scroll (es decir, descender o ascender con la barra de desplazamiento o con la rueda del mouse).

En realidad, se trata de definir secciones de una misma p√°gina, colocarlas una debajo de otra y crear un men√ļ que sirva de atajo. Esto es posible con jQuery.

Antes de comenzar, aquí puedes ver algunos sitios web que ya utilizan este efecto:

¬ŅEs el que deseabas? Entonces, manos a la obra:

Primero, debemos descargar el plugin jQuery ScrollTo, que permitir√° que el efecto scroll se vea suave y no resulte entrecortado.

Como segundo paso, deberemos descargar este otro plugin ¬Ľ

Luego, seguiremos con el código. Lo primero es crear una lista con todas las secciones:

[HTML]

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

[/HTML]

Lo siguiente, ser√°n algunas lineas de JavaScript:

[JAVASCRIPT]



[/JAVASCRIPT]

Por √ļltimo, en la navegaci√≥n, es necesario llamar al plugin:

[JAVASCRIPT]
$(document).ready(function() {$(‘#nav’).onePageNav();});
[/JAVASCRIPT]

Por si fuera poco, este plugin permite algunas opciones de configuración extras. Para ello, debes editar el archivo y modificar las siguientes lineas:

  • currentClass: ‘current’
    Agregar clase a un item de la lista, cuando el item de navegación está seleccionado.
  • changeHash: false
    Si quieres que el hash cambie cuando el usuario haga clic en una opci√≥n de la lista de navegaci√≥n, reempl√°zalo por “true”.
  • scrollSpeed: 750
    Aquí puedes definir la velocidad con la que la página descenderá o ascenderá cuando una opción de la lista de navegación sea cliqueada.

Eso fue todo. ¡Hasta la próxima!

Fuente original del artículo: Trevordavis.net
Traducción realizada por Elwebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (15)

  1. Nando Merino dice:

    Me parece un efecto genial ademas es justo lo que estaba buscando para un nuevo proyecto, solo tengo una duda y la suelto antes de ver el codigo y analizarlo, ¬Ņes posible hacer lo mismo pero en horizontal? y otra duda ¬Ņque es el hash? por lo demas genial y a ponerse manos a la obra

  2. Mr. Raymon dice:

    Un buen tutorial para poder hacer paginas diferentes aunque lo interesante seria hacerlo de manera que no necesitaramos plugins. Seria mucho mas dificil pero creo que asi aprovechariamos los recursos.

    Saludos y Gracias.

  3. Lalo dice:

    Se ve genial, tenia la idea de hacer algo parecido, que bueno que estan de regreso… =)

    Saludos desde M√©xico…

  4. Juanjo dice:

    Hola a todos!
    A mi el que realmente me gustaría saber como se hace es este otro:

    http://designjam.co.uk/

    Es muy parecido pero no igual…os habeis cruzado con alguna libreria que lo implemente?
    A√ļn as√≠ est√° muy conseguido. Me gusta mucho! Enhorabuena por el tutorial.

    Muchas gracias, un saludo!

  5. renzo dice:

    se ve bien pero me asalta una pregunta los usurios no tienen que descargar nada y debe tener un limite el espacio de trabajo por cada pantallazo?, un abrazo gracias por seguir adelante saludos desde colombia.

  6. Diana dice:

    Hola, me parece excelente este articulo, solo que quede con una duda, puesto que vi en las paginas de ejemplo como ‚ÄĘBrizk Design que cuando solo navego con el mouse por toda la pagina automaticamente el Menu selecciona las parte donde estoy ubicada, por favor me indicas si en con changeHash: false o True que puedo logarr este efecto Gracias
    Gracias estoy en Colombia

  7. Marcelo dice:

    Es genial este js, mi p√°gina la hice (hace 1 a√Īo largo) con atajos pero sin este efecto, me viene de 10! Gracias.

  8. Israel dice:

    Al principio del HTML de la lista (l√≠nea 4) se te ha “colado” unas comillas y a partir de ah√≠ el texto sale mal coloreado.

  9. Raul dice:

    Este efecto esta genial.
    Hace mucho tiempo que no visitaba la p√°gina y cuando lo hago me encuentro con este tutorial.
    Sigan adelante!

  10. Diana dice:

    Hola, gracias esta muy interesante, por favor si me indican como hago para que cuando este navegando en el sitio se vaya seleccionando en el menu donde estoy ubicada, por favor lo necesito urgente pero no he logrado entender como obtener este efecto. Gracias

  11. Morton dice:

    @Diana: Intenta con las configuraciones extra del plugin, verás algunas explicadas cerca del final de este artículo.

  12. Cande dice:

    Hola!
    Muchas gracias por el tutorial
    Saben que plugin necesito para conseguir el efecto de las flechitas que usaron en este sitio? http://crushlovely.com/

  13. Miguel dice:

    Es una idea muy buena; con tu permiso hare referencia a este articulo desde mi pagina, y queda anotado para cuando lo pueda utilizar.
    Gracias!!!!

  14. Javier Diaz dice:

    Tengo una pregunta sobre como dar ese mismo efecto a varias listas en la web, o solo funciona con una en especifico? Saludos ūüėÄ

  15. Dise√Īo Web Quilmes dice:

    Muy bueno me encanta este efecto, lo voy a usar para mi proxima web, o para mi portfolio.
    gracias y muy buen blog]!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder