Animaciones al Scrollear con Intersection Observer | Javascript

Подписаться 510 тыс.

Просмотров 44 тыс.

50% 1

En este tutorial aprenderás la API de Intersection Observer para hacer cosas como correr animaciones al scrollear en una página web.
Mis cursos de desarrollo web:
⭐ Curso Completo de Diseño Web Profesional:
www.desarrolloweb.io/cursos/d...
⭐ Curso Completo de React y Firebase:
www.desarrolloweb.io/cursos/r...
⭐Curso Completo de Javascript
www.desarrolloweb.io/cursos/j...
⭐ Curso Completo de PHP y MYSQL:
www.desarrolloweb.io/cursos/p...
⭐ Curso de Bootstrap 5:
www.desarrolloweb.io/cursos/b...
⭐ Curso Completo de creación de tiendas online:
www.desarrolloweb.io/cursos/t...
---
📄 Código del Proyecto:
github.com/falconmasters/inte...
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters

Наука

Опубликовано:

10 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 115

@FalconMasters 2 года назад

Manita arriba al video si te gusto el video y aprendiste algo nuevo! 👍 Y no olvides suscribirte para mas tutoriales!

@nicolastovar792 2 года назад

Super.

@jerlandejoseph4350 2 года назад

!Es grandioso!

@AlexizGD 2 года назад

Si haces un curso de GSAP, seria una locura no importa que sea de paga

@cloudstrife80 2 года назад

Eres el mejor uwu

@axelosvaldo1343 2 года назад

Yo llevo años siguiendo a Falcon, sinceramente su contenido para mí es el mejor, muy bien explicado, les recomiendo mucho que tomen sus cursos, yo tengo el de diseño y uff, es brutal, buenísimo!!

@FalconMasters 2 года назад

Muchas gracias por este comentario Axel !

@MrSetevebien Год назад

Sos un verdadero CRACK explicando. Vengo de udemy de un curso de Js donde no lo terminaba de comprender y vos lo histe facil. GRACIAS!!

@AguVDev 2 года назад

Muy buen ejemplo, siempre despertas la creatividad con tus tutoriales!

@zcoding8355 2 года назад

Genial como siempre! 😎👍 En cada video mejoras muchisimo, no solo el contenido sino la forma de enseñar, se nota tu esfuerzo... Gracias por mi y me atrevo a dartelas por toda la comunidad dev, a quien tanto has apoyado! Crack...💪

@jrluidar2384 9 месяцев назад

Perfectamente explicado!!! Gracias

@pablodemartini6318 Год назад

Excelente como siempre, el tema y la explicación.

@sakuracc8436 Год назад

Gracias por la explicación, tan clara como siempre!. Necesito utilizar esto en typescript y me ayudaste mucho a entenderlo!.

@sebastianmoyano7313 2 года назад

Muchas gracias, excelente, muy bien explicado, estoy armando mi portafolio y quería aprender hacer eso

@martinfloresdev Год назад

hasta ahora el mejor video de IntersectionObserver :)

@brianbouza1730 Год назад

Nunca había vista una explicación Yam buena como la tuya, espero que sigas así de animado con estos videos tan bueno

@FalconMasters Год назад

Muchas gracias!

@juanveron9734 Год назад

Fue oro esta clase, gracias!

@AlejandroCobaleda 2 года назад

El contenido que haces es god! , gracias por tanta enseñanza.

@cesargarcia-ji8bp 2 года назад

gracias crack es lo que eh estado buscado broo

@cesartejada7196 Год назад

Muchas gracias por compartir tus conocimientos con los que empezamos a programar. Eres un crack. Un saludo!!

@FalconMasters Год назад

Gracias a ti, me alegra que te sirvan mis videos!

@ayrtonnahuel6042 2 года назад

Gracias por todo el contenido Falcon, me ayudaron a creecer muchísimo. Te lo agradezco con el ❤️

@FalconMasters 2 года назад

Me da mucho gusto que así fuera.

@HimawariClow 10 месяцев назад

Muy bien explicado, me suscribo desde ya!

@jonatanezequiel3764 Год назад

Excelente video, hermano! Gracias!

@jfav809 2 года назад

Maravilloso, después de tanto buscar encontre lo que necesitaba, muchas gracias

@FalconMasters 2 года назад

Me alegra que así fuera!

@lucasfr86 2 года назад

Tomé su like buen hombre! Con esto nunca más voy a usar WOW.js jeje saludos

@da.tt.r3025 Год назад

Excelente explicación. Manito arriba.....

@juanbarrionuevo3320 Год назад

Excelente! muchas gracias!

@brianrios6714 2 года назад

muy buena explicación!

@martincornejo3479 Год назад

Muchas gracias! Muy bien explicado

@FalconMasters Год назад

Gracias!

@danielcolmenares8234 Год назад

excelente explicacion

@uwupaloma3387 Год назад

Increible video

@fransanto5315 Год назад

Muy bien explicado el proceso, pero os comento mi experiencia. Estando en local con un proyecto Wordpress, me funciona correctamente el código JS, aunque apunto a más imágenes. Pero en la misma web ya en producción no funciona. Me percaté que la clase visible no se añade, después de algunas horas de investigación y por el método prueba error, pude lograr que funcionase. Para lograrlo al añadir la clase visible hay que añadir como segundo parámetro 'entrada.isIntersecting'. No logro saber porqué pero funciona. Dejo este comentario para a quien pueda interesarle. Saludos desde España.

@ivanrodriguez3405 2 года назад

Buenisimooo, buen vídeo guuapooo

@juanda3396 2 года назад

Espero con ansias otro video

@FalconMasters 2 года назад

Cada semana un video nuevo

@jesusalexistenoriohernande6994 11 месяцев назад

Mas videos como esteeee!

@C.F_Studio 2 месяца назад

Magistral y buen ritmo

@newentu Год назад

Muy interesante 😃😃

@alfonsoadamerueda9842 2 года назад

ya lo logre muchas gracias.

@matiasmaez 2 года назад

maestrooo 🙌🙌

@oscarcastaneda7000 Год назад

Como un comentario adicional, una vez que la imagen se le agrega la clase 'visible' ya no es necesario mantener el observe activo, después de la línea 10 yo colocaría observador.unobserve(entrada.target) para evitar que se siga ejecutando infinitamente

@albertomunoz964 Год назад

No sería observador.unobserve(entrada)? sin el target? pregunto porque no se

@oscarcastaneda7000 Год назад

@@albertomunoz964 Buena pregunta. Es necesario pasar “entrada.target” porque de esta manera el observer detecta específicamente que elemento deja de observar, en este caso la imagen. En otras palabras entrada.target = imagen entrada = object

@rolandodiaz6020 2 года назад

Gracias hermano! Manito ARRIBA y Campanilla ACTIVADA!. Sensei!

@davidpavon1880 2 года назад

gracias amigo :)

@cousi 2 года назад

Muy interesante

@alfredomontes1111 2 года назад

Crack ❤️💪

@cloudstrife80 2 года назад

Está genial la implementación. Siento que Intersection Observer podría explotarlo para hacer efectos bien alocados y divertidos, sin embargo, ara mostrar imágenes o elementos con scroll humildemente yo recomendaria más la librería AOS. Falcon, un dia estaría genial te aventaras un tuto de AOS, está bien fácil de implementar y todo. Gracias por siempre aportarnos nuevas cosas ♥

@FalconMasters 2 года назад

No la conocía, esta genial. Lo voy anotar en mi lista de videos por hacer.

@luisangelcortezgrijalva6778 2 года назад

@Javier Caballero una vez hice y mi máquina se congeló y así se quedó por mucho tiempo.

@YosipmikeColin 2 года назад

Falcón puedes subir páginas con animación de GSAP.

@FalconMasters 2 года назад

Lo voy anotar en mi lista de posibles videos

@YosipmikeColin 2 года назад

@XitusDeves una biblioteca para animación avanzadas en páginas web mucho mejor de jQuery

@YosipmikeColin 2 года назад

@XitusDev la verdad nunca he usado anime.js no sabría decir si es mejor o peor o iguales. Pero te puedo decir que con GSAP puedes hacer muchas animaciones elegantes.

@TutoGamerOficial Год назад

genio !

@starbuckscoffeeoficial 2 года назад

Como siempre el mejor 😀

@FalconMasters 2 года назад

Aprecio tus palabras Starbucks Oficial, pero mejor patrociname lol

@starbuckscoffeeoficial 2 года назад

@@FalconMasters JAJAJAJAJAJA

@sebastiandossantos7158 2 года назад

Falcon muy buen video! A esta api debemos linkearla o llamarla de alguna manera para que funcione?

@strongapm5335 2 года назад

excelente

@samuelcardozo9861 Год назад

muy bueno

@jseh_ 2 года назад

Si esta intersante, un video explicando como hacer el efecto parallax plox

@diegoortiz9674 2 года назад

Crack !!

@jonathancaceres4981 Год назад

Mi maestro

@miguelmondragon1366 2 года назад

Falcon estaria genial un curso en udemy de python

@s.m.4708 Год назад

Muy buen video. Como se podria hacer para que cuando seguis haciendo scrolll para abajo y ya no este la imagen en el viewport, esta vuelva a desaparecer?

@caminoalmillon007 2 года назад

Voy a yorar; esto es maravilloso🤧

@FalconMasters 2 года назад

Yo también llore la primera vez que lo use.

@nelosanjines6463 2 года назад

Buen tutorial estimado amigo Falcon, una consulta, existe el seporte necesario para implementarla?

@FalconMasters 2 года назад

Si, todos los navegadores actuales lo soportan.

@javierbrausin Год назад

Hola, me pasa algo muy curioso, el efecto me funciona cuando utilizo el inspector del navegador, pero si dejo de utilizar el inspector no funciona. Alguien sabe el porqué

@IvanSanchez-nz4vt Год назад

Muy buena explicación me quede pegado a la pantalla, recién me estoy entrando a este mundo, solo tengo un pregunta, De donde sacas entradas y entrada? veo que no son variables que declaras, si es algo obvio , disculpa la ignorancia XD

@alfonsoadamerueda9842 2 года назад

Hola muchas gracias por el video, estoy tratando de hacerlo pero con texto pero no me funciona me puedes ayudar por favor

@abndea 2 года назад

apenas estoy aprendiendo css y ya quiero hacer esto xd

@adrianrios8597 Год назад

Hola, lo encuentro genial..!! Pero tengo una duda, que es lo que pasa si quiero implementar todo este efecto a un sitio web completo.. ?? tendría que por cada elemento crear un ID y eso codificarlo en el archivo js.? Existirá la forma de nop generar más código y que el código sea reutilizable.? Te leo, y gracias por el tutorial, lo encontré muy bueno.

@sebastiansiman6076 Год назад

por empezar crea una variable con el queryselector. Así te evitas de crear una variable para cada class o id. Luego habría que ver que tantas animaciones únicas o repetidas tenes en la página, si evitas usar px o em

@EduardCamiloOrtegaSanchez 9 месяцев назад

P*to amo!

@laubanegas6130 Год назад

Buenas tardes! Muchas gracias por tu tutorial, te quería hacer una consulta ya que logro que la imagen "aparezca" en js pero al probar en la consola como se vería en otros dispositivos más pequeños me crea una barra inferior (como de scroll de izq a der) y un efecto raro al aparecer la imagen. Sabés cómo lo puedo modificar? Gracias

@FalconMasters Год назад

Hola Lau, pueden ser muchas cosas, prueba poniendo un overflow:hidden; en el contenedor principal de tu página, eso quizas te ayude a ocultar ese scroll horizontal.

@mmci_oficial 2 года назад

Y se puede imprementar en Wordpress

@FalconMasters 2 года назад

Si, lo puedes implementar si sabes como agregar código javascript a tu tema o sitio

@todocurso2274 3 месяца назад

La función CargarImagen, que recibe entradas y observador, por qué observador no se ilumina? lo que veo es que no se lo llama desde ningún lado. Falta llamar a observador? A mí no me funcionó

@sky473_ 2 года назад

Falcón, siempre he tenido una duda, siempre se usan apis cuando se desarrolla código para un cliente? No se hacen las animaciones con puro js? nunca he trabajado en una empresa, desconozco todo eso xd

@omarguzman9426 2 года назад

xd si es un proyecto pequeño la puedes desarrollar en js pero ya en proyectos mas grandes es mejor utilizar api y frameworks que te ayuden a desarrollar tu app

@FalconMasters 2 года назад

Si te refieres a esta API de Intersection Observer siempre deberías de usarla, no veo mucha razón en no usarla. En este caso la API es del propio javascript, así que como puedes ver es muy fácil de usar y no hay problema alguno en usarla.

@strongapm5335 2 года назад

A que se debera que cuando accedo al valor de cualquier propiedad entries me salen como undefinded y cuando accedo a la propiedad como tal me arrojo todos sus valores. :(

@guerreroalvarezedsonsaid4517 2 года назад

I love you

@joaquinrodriguez2786 Месяц назад

Donde consigo imagenes de buena calidad para ponerla en fondos largo como el muestra en el ejemplo, o hay alguna manera especifica de ponerlo para que no pierda calidad

@FalconMasters Месяц назад

Hay muchas páginas, la que yo suelo utilizar es la de unsplash. Tiene miles de imágenes gratuitas y de todos los tamaños, así que allí puedes encontrar imágenes grandes.

@brianmichelhernandezgarcia 2 года назад

Oye no se te ha ocurrido un vídeo para revisión de portafolios?

@FalconMasters 2 года назад

¿Revision de portafolios?

@brianmichelhernandezgarcia 2 года назад

Si, que las personas te manden sus páginas creadas por ellos mismos donde muestran sus trabajos. Y tú con base a tu experiencia puedas dar consejos sobre diseños, mejoras etc. 😅

@juanalmonte1642 2 года назад

Se puede aplicar a cualquier div?

@FalconMasters 2 года назад

@santiagoernst2306 Год назад

Hola! Cuál es tu apariencia de VS Code??

@FalconMasters Год назад

Se llama Ayu Mirage

@jhonatanveliz4580 Год назад

Porfavor ancla este comentario!!!

@jampy42 2 года назад

Pero eso no se puede hacer con css? Cuál es el beneficio?

@FalconMasters 2 года назад

Las animaciones se pueden hacer con CSS. Pero con CSS no puedes detectar cuando un elemento entra a pantalla.

@jkimtorrez7097 2 года назад

en el responsivo no me funciona y nose por que

@adonisbecerramorales8453 9 месяцев назад

A mi tampoco, has encontrado alguna solución?

@maxidevs 2 года назад

No entiendo porque el parametro entradas al hacer console.log tiene un array dentro. Entiendo que el observador es el objeto y que al hacerle el console, este se muestre. Pero "entradas" no lo he visto en ningun lado, de donde sale ese array y como termina asignado? Es especifico, osea que nunca puede ser llamado de otra forma?

@noeliaocanavega6083 2 года назад

Yo tampoco entiendo

@jkimtorrez7097 2 года назад

me ayudan con eso

@caminoalmillon007 2 года назад

increible que esto tenga tan pocos likes

@nazz4522 7 месяцев назад

tema vscode: Ayu Mirage

@alayog_z 2 года назад

Falcon, ya probaste windows 11? Esta genial y tiene buen rendimiento Esta muy estable

@bryanweber5177 Год назад

No entiendo de dónde sale el parámetros "entradas" si no está definido por ningún lado. Por eso no entiendo en qué se basa el console.log para arrojar resultados al momento de referirse a ese parámetro...

@FalconMasters Год назад

Hola Bryan, entradas es un parámetro que definimos en esa primera vez donde lo escribo. Por eso no se ve que lo defina antes como si fuera una variable normal.

@davidpavon1880 2 года назад

ya quiero llegar a niveles mas altos pero tengo una silla que me revienta la espalda :v