• Publicidad
  • Contacto
Pixelco Tech Blog
  • 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 Blog
  • 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 Blog
Sin resultados
Ver todos los resultados

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

Diego CambiasoporDiego Cambiaso
29/09/2010
enDesarrollo/programación, Internet, Recursos
Tiempo de lectura2 minutos
0

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.

EntradasRelacionados

4 Tips de Oracle para iniciarte en el mundo de la programación

Ventajas, desventajas y consejos al crear tu sitio 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 y Desarrollador de Software. 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

RelacionadoEntradas

Tutorial: análisis de la composición corporal con el Galaxy Watch4

08/12/2021

Cómo sacar provecho del asistente de voz del TV

23/08/2021
Remo Photo Recovery

Remo Photo Recovery – Cómo recuperar fotos borradas (review y tutorial)

10/08/2021

Útiles tips para usar Samsung DeX para PC

21/06/2020

HONOR X8 liviano y con diseño ultra-delgado

08/08/2022

Camon 19 Pro – ¿Qué tan bueno es?

08/08/2022

X80 conoce el smartphone más premiun de vivo con cámaras potenciadas por IA

03/07/2022

Moto Edge 30 Pro ¿Qué tan bueno es? VIDEO

02/07/2022

Serie Camon 19 – Conoce los detalles de los nuevos equipos de Tecno Mobile

01/07/2022

Una mujer supera su propio récord y calcula el valor del “Número Pi” en 100 billones de dígitos

12/06/2022
Pixelco Tech News Pride 2022 logo
Pixelco Tech News Pride 2022

Pixelco Tech

Pixelcoes 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

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

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

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...