Hola gente, este es mi primer aporte y voy a hacer mi mejor esfuerzo por ser lo mas claro y conciso posible. Espero que les guste y de antemano, les agradezco todo su feedback!
Sin mas vueltas, vamos a lo concreto:
Waypoints!
La traduccion dura de “Way - points”: puntos de camino, o puntos de recorrido, no me convence.
Sinceramente, prefiero quedarme con mi interpretacion del nombre de la libreria: debido a la fonetica similar entre “way” y “wait”, creo que el nombre Wait - point da una descripcion mas acertada de las posibilidades que nos otorga esta libreria: Puntos de espera, o wait-points en ingles.
¿Para que sirven?
Esta librería nos permitirá crear un punto de espera dentro del documento HTML para lanzar una determinada acción.
¿Por ejemplo?
Lanzar animaciones al llegar a un determinado lugar de una pagina web.
¿Mas concreto?
Los invito a entrar a su documentación oficial y, simplemente desplazarse hacia abajo y ver cómo se lanzan pequeñas notificaciones a la derecha de la página.
¿Cómo lo uso?
Nuevamente, pueden recurrir a su documentación oficial, que es la mejor manera, pero para los que no sean muy amigos del ingles, haré una traduccion de su uso mas básico.
Uso básico:
Suponiendo que usan npm como gestor de paquetes:
1 - Desde la terminal y dentro de la carpeta raíz de su proyecto, instalaremos la librería:
npm i waypoints
2 - En nuestro documento HTML creamos un div (o cualquier elemento) con id = “basic-waypoint”
<divid="basic-waypoint"> Mi primer Waypoint! </div>
-Tener en cuenta que el elemento debera estar por debajo de la carga inicial de la pagina, sino, obviamente, el waypoint se lanzará al momento de la carga.
-En otras palabras, debemos hacer scroll para llegar al waypoint.
3 - Pasaremos a usar la libreria, de una manera muy sencilla:
var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
alert('Way point basico lanzado')
}
})
Listo! Este waypoint basico lanzará una alerta cuando lleguemos a ese punto del scroll dentro de la página.
Extras:
Esta librería tiene implementaciones para vanilla JS, React js y vue JS!
Si les sirve y tienen alguna duda pregunten!
Siganme en mi instagram, dónde todos los días comparto cosas relacionadas con informática y tecnología, y de a poco intento crear una comunidad de personas de mi ciudad que tengan intereses por esta apasionante ciencia!
Instagram: sebaasegura
Saludos y todo su feedback sera agradecido!
