Waypoints.js – Activa funciones al desplazarse a un elemento
Adrián Gómez
Adrián Gómez
En esa búsqueda de crear buenos efectos en los sitios web, WayPoint es una librería que te permite crear triggers al desplazarse a ciertos elementos, veremos juntos un ejemplo práctico de cómo funciona.

Cuando eres desarrollador web, siempre buscas librerías que te faciliten el trabajo, especialmente cuando quieres crear detalles especiales en tus sitios web,  como su sitio oficial lo dice, Waypoint es la forma más sencilla de activar un trigger cuando haces scroll hasta un elemento en un sitio web.

Normalmente yo utilizo Waypoint para activar un <div> en el top del sitio web, en modo sticky, como en nuestro sitio web al hacer scroll hacia abajo y pasas la imagen del header automáticamente se activa un menú y desaparece cuando vuelves a hacer scroll hacia arriba, todo este efecto es gracias a Waypoint, en algunos proyectos de blogs internacionales me ha servidor para activar publicidad o recordatorios al llegar al footer de los sitios web.

Ejemplo práctico

Haremos ejercicio práctico de waypoint en acción. En este ejercicio, mostraremos una alert en javascript al llegar a un <div> en específico.

Primero descargamos la librería desde la página oficinal. Seguidos de eso abrimos nuestro editor web favorito en mi caso Sublime Text, y creamos la estructura html básica, y agregamos el archivo jquery.waypoints.min.js, es importante que también incluyamos la libreria de jquery.

Ahora dentro del body creamos una estructura con la siguiente forma:

Los div head, body y footer los debemos rellenar con contenido de tal forma que podamos generar un scroll por toda la pagina web.

Al final agregamos el siguiente script, el cual mostrará una alerta al llegar al div final.

Puedes ver este ejercicio funcionando aquí o descargar los archivos fuentes aquí.

En conclusión WayPoint puede ser de gran ayuda y tiene muchas más funciones, como por ejemplo determinar cuál es la dirección del scroll (up & down), activar un trigger al estar a X distancia en píxeles del elemento entre otras. Los invito a usar su imaginación y usarlo en sus siguientes proyectos.

Cualquier consulta no duden en comentar este post.

Comparte este post
Comparte en Facebook
Comparte en Twitter
Comparte en Google+
Comparte en LinkedIn
+
ELEVAR ANIMAR INSPIRAR