Forem: César Ramez

Coordenadas de elementos con JS.

César Ramez — Wed, 15 Nov 2023 05:53:41 +0000

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. 😀

NodeList vs Array

César Ramez — Mon, 06 Mar 2023 04:35:47 +0000

Cuando usamos una misma clase para múltiples elementos de HTML, podemos acceder a todos estos nodos mediante la propiedad document.querySelectorAll('.class-name'). Esto nos mostrará un tipo de dato llamado NodeList el cual, a su vez, pese a mostrar todos los elementos que coinciden con la clase enviado a querySelectorAll como un array, no es lo mismo que un array “tradicional” como el que conocemos de toda la vida…

Esta diferencia se basa en que NodeList aunque podría iterarse sobre él usando forEach, no es compatible con todos los métodos con los que podría usarse en un array común. Por ejemplo, con NodeList no podríamos usar métodos como reduce, map, filter, some, etc.

Siempre que usemos querySelectorAll para iterar sobre varios nodos que manejan una clase en común, podemos convertir a NodeList en un array tradicional usando la propiedad Spread Operator que ofrece ES6. De hecho, siempre que se trabaje con NodeList es recomendable pasarlo a un array tradicional. Esto se debe a que los motores de JS en el navegador, principalmente V8 de Chrome, están optimizados para trabajar con arrays.

Accediendo a múltiples nodos con querySelectorAll:

const nodeList = document.querySelectorAll('div')

Resultado de ejemplo:

> NodeList(5) [div.container, div.input-group, div.form, div.invalid, div.feedback]

Convertir NodeList a un array tradicional:

const nodeListAsArray = [...nodeList]

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

Añade un gradiente a tus imágenes con CSS.

César Ramez — Fri, 28 Oct 2022 01:28:57 +0000

Algunas veces necesitaremos agregar un gradiente a nuestras imágenes ya sea a modo de efecto (con un hover) o simplemente porque queremos añadir un texto encima de la imagen.

Agregar este efecto que comienza con un tono oscuro y que posteriormente se vaya degradando, nos ayudaría contrastar el texto.

Para lograr esto, primero tendremos que tener nuestra imagen dentro de un contenedor ya sea con una etiqueta div o figure como se muestra a continuación:

HTML

<div class="container-image">
      <img src="" alt=""/>
</div>

Para el código CSS, podemos hacer las modificaciones que queramos desde cambiar el color de fondo, la dirección del degradado o incluso agregar más colores.

CSS

.container-image {
  width: 100%;
  position: relative;
}

.container-image img {
  width: 100%;
}

.container-image::after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, #22577a, transparent);
}

Puedes ver el código en función en Codesandbox o en Codepen.

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

:first-child en CSS

César Ramez — Fri, 04 Feb 2022 17:57:19 +0000

La pseudoclase :first-child nos ayuda a dar estilos al primer elemento de una lista de selectores. Por ejemplo, imagina tener una lista en HTML con ul-li o simplemente una lista de los mismos selectores como enlaces (etiquetas a) o párrafos (etiquetas p) y en cualquiera de estos casos buscamos pintar, por ejemplo, al primero elemento hijo de esta lista en color rojo. Esto lo lograremos agregando la pseudoclase :first-child a nuestro selector.

HTML

<ul>
    <li>Primer hijo</li>
    <li>Segundo hijo</li>
    <li>Tercer hijo</li>
</ul>

CSS

ul li:first-child {
   color: red;
}

Si te gustó el post, cuéntame en Twitter 😀