🕷️ Crawler Inspector

[Andros Fenollosa ](https://andros.dev/) - [es](https://andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/) - [en](http://en.andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/) - [ Blog Blog](https://andros.dev/blog/) - [ Cursos Cursos](https://andros.dev/cursos/) - [ Libros Libros](https://andros.dev/books/) - [ Charlas Charlas](https://andros.dev/talks/) - [ CV CV](https://andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/) - [ Contacto Contacto](https://andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/) # Javascript ejecutar cuando una etiqueta sea visible - web - javascript /https://andros.dev/media/thumbnails/ai_thumbnail_c84dc8a5.png) Si quieres **lanzar una función de JavaScript cuando se muestre una etiqueta de HTML**... ¡Estas de suerte! Con el **nuevo API Observables** evitarás cálculos innecesarios como comprobar la posición del elemento DOM. Te enseño lo fácil que es implementarlo en la actualidad, **sin recurrir al evento de scroll** (scrollTop) u otras técnicas que malgastan la CPU del equipo. ## DEMO ## Cuando visualices el cuadrado se añadirá la clase '.cuadrado--rota' # ¡Baja\! 👇👇👇👇👇 ## HTML y CSS Antes hay que definir el **elemento que queremos usar como disparador**. Cuando sea visible en el `viewport`, o entre en la zona visible por el ojo del visitante, es cuando lanzaremos el código. El HTML del ejemplo anterior es un sencillo `<div>`. ``` <div class="cuadrado"></div> ``` Y su CSS contiene `.cuadrado` que le da forma y `.cuadrado--rota` que será añadido cuando sea visible dando la animación de rotación. ``` .cuadrado { border: .2rem solid black; width: 10rem; height: 10rem; transition: 2s; margin: 0 auto; margin-top: 100rem; margin-bottom: 5rem; } .cuadrado--rota { transform: rotate(45deg); } ``` ## Javascript Llega el momento de usar `Observable`. ``` // Capturamos el elemento que deseamos observar const miCuadrado = document.querySelector('.cuadrado'); // Creamos un objeto IntersectionObserver const observerCuadrado = new IntersectionObserver((entries) => { // Comprobamos todas las intesecciones. En el ejemplo solo existe una: cuadrado entries.forEach((entry) => { // Si es observable, entra if (entry.isIntersecting) { // Añadimos la clase '.cuadrado--rota' miCuadrado.classList.add('cuadrado--rota'); } else { // En caso contrario quita la clase miCuadrado.classList.remove('cuadrado--rota'); } }); }); // Añado a mi Observable que quiero observar. En este caso el cuadrado observerCuadrado.observe(miCuadrado); ``` Puedes simplificar la tarea usando [FFNM](https://github.com/tanrax/FFNM), una herramienta propia que me ayuda a aplicar la misma lógica sin repetirme. - [DEMO](https://andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/#blog-single-content__title--demo) - [HTML y CSS](https://andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/#blog-single-content__title--html-y-css) - [Javascript](https://andros.dev/blog/280de801/javascript-ejecutar-cuando-una-etiqueta-sea-visible/#blog-single-content__title--javascript) Este trabajo está bajo una [licencia Attribution-NonCommercial-NoDerivatives 4.0 International.](https://creativecommons.org/licenses/by-nc-nd/4.0/) /https://andros.dev/static/img/components/license/by-nc-nd.png) ## ¿Me invitas a un café? [Apóyame en Ko-fi](https://ko-fi.com/W7W02LB83 "Support me on ko-fi.com") ## Comentarios Deja un comentario Todavía no hay ningún comentario. /https://andros.dev/static/img/blog/author.png) Escrito por Andros Fenollosa febrero 28, 2021 2 min de lectura ## Sigue leyendo /https://andros.dev/media/thumbnails/default.png) - web - html5 - javascript - jquery - menú desplegable - menú - Sass ## Menú desplegable con varios niveles en JQuery /https://andros.dev/media/thumbnails/default.png) - web - html5 ## ¿Diferencia entre Diseñador Gráfico, Diseñador Web, Programador Web y Webmaster? /https://andros.dev/media/thumbnails/ai_thumbnail_69de42cc.png) - web - javascript - typescript ## Typescript importa tus modulos ## Visitantes en tiempo real Estás solo: 🐱 Hecho con  por Andros Fenollosa usando [Django LiveView](https://django-liveview.andros.dev/) Diseñado por [Suquet Estudi](https://suquet.studio/) -  - [](https://andros.dev/static/social.org) - [](https://activity.andros.dev/@andros) - [](https://github.com/tanrax)

Si quieres **lanzar una función de JavaScript cuando se muestre una etiqueta de HTML**... ¡Estas de suerte! Con el **nuevo API Observables** evitarás cálculos innecesarios como comprobar la posición del elemento DOM. Te enseño lo fácil que es implementarlo en la actualidad, **sin recurrir al evento de scroll** (scrollTop) u otras técnicas que malgastan la CPU del equipo. ## DEMO ## Cuando visualices el cuadrado se añadirá la clase '.cuadrado--rota' ## ¡Baja\! 👇👇👇👇👇 ## HTML y CSS Antes hay que definir el **elemento que queremos usar como disparador**. Cuando sea visible en el `viewport`, o entre en la zona visible por el ojo del visitante, es cuando lanzaremos el código. El HTML del ejemplo anterior es un sencillo `<div>`. ``` <div class="cuadrado"></div> ``` Y su CSS contiene `.cuadrado` que le da forma y `.cuadrado--rota` que será añadido cuando sea visible dando la animación de rotación. ``` .cuadrado { border: .2rem solid black; width: 10rem; height: 10rem; transition: 2s; margin: 0 auto; margin-top: 100rem; margin-bottom: 5rem; } .cuadrado--rota { transform: rotate(45deg); } ``` Llega el momento de usar `Observable`. ``` // Capturamos el elemento que deseamos observar const miCuadrado = document.querySelector('.cuadrado'); // Creamos un objeto IntersectionObserver const observerCuadrado = new IntersectionObserver((entries) => { // Comprobamos todas las intesecciones. En el ejemplo solo existe una: cuadrado entries.forEach((entry) => { // Si es observable, entra if (entry.isIntersecting) { // Añadimos la clase '.cuadrado--rota' miCuadrado.classList.add('cuadrado--rota'); } else { // En caso contrario quita la clase miCuadrado.classList.remove('cuadrado--rota'); } }); }); // Añado a mi Observable que quiero observar. En este caso el cuadrado observerCuadrado.observe(miCuadrado); ``` Puedes simplificar la tarea usando [FFNM](https://github.com/tanrax/FFNM), una herramienta propia que me ayuda a aplicar la misma lógica sin repetirme.