Coordenadas de elementos con JS.

El método getBoundingClientRect() devuelve información de un elemento sobre su tamaño y posición relativa respecto al viewport. Este método es un objeto de la clase interna DOMRect que como parte de sus propiedades, tenemos a top/bottom que actúan como coordenadas en Y, y left/right como coordenadas en X.
Podemos obtener las coordenadas de cualquier elemento HTML con JavaScript, por ejemplo:

Tenemos el siguiente HTML:

<main>
  <section>
    <h1 class="title">Hello World!</h1>
  </section>
</main>

Ahora obtenemos las coordenadas del elemento h1 respecto a su eje Y.

const title = document.querySelector('.title')
const elementCoordinates = title.getBoundingClientRect().top
console.log(elementCoordinates)

Si añades más contenido en el documento a modo de que exista un scroll, te darás cuenta de que conforme scrolleas, el resultado será diferente, ya que este valor se obtiene a partir de qué tan cerca o alejado está el elemento del viewport. Para entenderlo mejor, veamos la siguiente imagen.

Ahora bien, ¿para qué nos podría servir las coordenadas de un elemento... 🤔?

Imagina que en lugar de obtener las coordenadas de un elemento h1, obtienes las coordenadas de un elemento contenedor, es decir, una section, article, div, etc. Al mismo tiempo, obtienes el tamaño del viewport desde donde sea visualizada tu página y que a partir de que ciertos elementos HTML tengan una mayor coordenada que el tamaño del viewport obtenido, haga cierta acción, como por ejemplo, una animación de scroll... 😱

NO SIEMPRE NECESITAS INSTALAR DEPENDENCIAS para hacer estas animaciones. Con el método getBoundingClientRect y unas cuantas propiedades más de JavaScript, puedes conseguirlo. Y lo mejor de todo, con muy pocas líneas de código! ¿Quieres ver una demo? Da click aquí para verlo en función. 😉

Si te gustó el post o tienes algún comentario, cuéntame en Twitter. 😀