• Publicidad
  • Contacto
Tech News, Magazine & Review WordPress Theme 2017
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech
Sin resultados
Ver todos los resultados

Cómo crear un efecto de desplazamiento de contenido con jQuery One Page Navigation Plugin

Diego Cambiaso por Diego Cambiaso
29/09/2010
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

jQuery One Page Navigation Plugin

Siempre estoy escribiendo sobre lo sencillo que es implementar una galería de imágenes, tooltips, menús y demás con jQuery. Hoy voy a escribir sobre lo sencillo que es desplazar de contenido con un plugin jQuery.

Se trata de jQuery One Page Navigatio Plugin, una solución para crear enlaces a distintas partes del contenido de una página web.

Implementación

Primero necesitamos enlazar las bibliotecas Javascript:

<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>

Segundo crear la estructura HTML que luego luego paginaremos:

El menú:

<ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li"><a href="#section-3">Section 3</a></li>
</ul>

El contenido a desplazar:

<div id="section-1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>

El plugin además ofrece opciones para personalizar le comportamiento, por ejemplo:

  • currentClass: ‘current’ – Define el elemento seleccionado por defecto.
  • scrollSpeed: 750 – Define la velocidad de desplazamiento.

jQuery One Page Navigation Plugin

Sitio: trevordavis.net/blog/jquery-one-page-navigation-plugin

Demo: trevordavis.net/play/jquery-one-page-nav

Tags: crear paginaciónCuriosidaddesarrollo webHTMLJavascriptjQueryjquery menujquery pluginRecursosSoftware libretutorial
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Siguiente
InternetSupervision

Averigua cuanto tarda en cargar tu sitio web desde todo el mundo con Internet Supervicion

Comentarios 4

  1. Diego says:
    13 años

    Hola Horacio.
    Mira hay demo en esta dirección. El ejemplo es un traducción libre de un post en inglés. Al final del post está la entrada.
    Saludos.

  2. HoracioNakama says:
    13 años

    Puedo sugerir que pongas un DEMO???

Tech

Diego Cambiaso

VideosReviews - Tutoriales
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

Diego Cambiaso
26/05/2023
Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Diego Cambiaso
15/05/2023
SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

Diego Cambiaso
13/04/2023
Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Diego Cambiaso
03/04/2023
La pantalla externa del motorola razr 40 ultra es la más grande y avanzada

La pantalla externa del motorola razr 40 ultra es la más grande y avanzada

02/06/2023
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

26/05/2023
Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

25/05/2023
Pixelco - Pride Month

Pixelco Tech

Pixelco es sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados
  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco por Diego Cambiaso.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist