- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
Efecto ScrollTo
noviembre 15, 2010
Este script es un pequeño plug-in, que permite elementos de scrolling de la página web o de la ventana de página web.
JavaScript
Para que el script funcione, el fichero index-#.html con scroller debe contener estas líneas de código HTML para incluir el script jquery.ScrollTo.js y jQuery framework:
La sección <head> del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos:
La función principal ready() es bastante simple de entender y funciona para toda la página. Configuramos que al hacer clic en un elemento (etiqueta <li>) con clase .nav > li a.q1 la página se animará a un elemento con #home id. La función scrollTo() tiene dos parámetros: la posición del objetivo/target y atributos. Aquí los atributos de script definen los siguientes valores:
• axis: – axis para ser desplazado (scrolled) (puede utilizar x, y, xy, yx);
• duration: – duración de la animación, none (sync) (ninguna) por defecto;
• queue: – si utiliza true y ambos ‘axes’ se desplazan, se animará en un ‘axis’, y luego en el otro (note que axisque es xy o yx, concluye el orden).
Hay muchas maneras diferentes para especificar la posición de objeto/target.
Por ejemplo
:
• un número;
• un ‘string’ (‘ 44′, ‘ 100px‘, ‘ +=30px‘, etc );
• un elemento DOM;
• un selector, que será en relación con el elemento de desplazamiento;
• un ‘string’ ‘ max‘ para desplazar hasta el final;
• un ‘string’ que especifica un porcentaje para desplazar a la parte del contenedor (50% para la mitad).
HTML
Ahora se puede revisar una representación de script HTML:
Aqui puede ver una lista con viñetas (etiqueta <ul>) con los enlaces a los bloques correspondientes. El atributo class de los enlaces (etiquetas <a>) especifica elementos para desplazarse hasta:
