No Solamente es útil, sino que lo explicas tan detalladamente que es muy difícil perderse y no entenderlo. Te agradezco mucho! Muy útil la verdad. Lograste algo que el chat gpt no podría razonar debido a la modernidad del tema.
Muchas gracias Midu, he podido integrarlo en un proyecto para mi portfolio y la verdad que de una manera tan sencilla y con tan poco código queda la animación super profesional. Muchas gracias de nuevo, un saludo !!!
Estoy tratando de darle mas seguimiento a tu contenido y que bueno que lo hice, esto de las animaciones en el scroll siempre ha sido un poquito complicado pero interesante para mi y BAM de pronto ya hay actualizaciones para trabajarlo con CSS puro, que bonito. Gracias Midu
increible que con solo unas lineas toda tu pagina pueda verse fresca dinamica y moderna. Se lo acabo de aplicar a las imagenes y a los parrafos y es una combinacion muy PRO .
Excelente aporte como siempre, si alguien quiere probarlo en Firefox además de cambiar el flag: layout.css.scroll-driven-animations.enabled, debe añadir el tiempo de la animación, sino no funciona. Ej: animation-duration: 1ms;
Sublime! Muchas más cosas como esta tendría que incorporar CSS de forma nativa. Sobre todo las cosas que se están tomando como estándares y que hay que hacer si o si con JS
Profe bendiciones, te doy muchas gracias por el video está muy bueno, sabes estás colocando últimamente videos sobre CSS muy buenos, me encanta CSS, me gusta mucho HTML y CSS, además estoy haciendo tu curso de HTML, nos vemos. Saludos desde Colombia 👍
Genial este video @midudev, siempre tienes un tema actualizado y lo explicas de fenomenal! Te felicito mucho 💪🏼🥳 y muchas gracias por compartir todo esto.
Midu. Cuando estudié CSS, creí, entonces, que con los temas visto me bastaba. He visto un par de tus videos y ahora no sé ni para qué molestarme en profundizar Javascript. ¿IntersectionObserver? ¿para qué? Todavía hay tanto que aprender de CSS que no pararé de ver tus vídeos Frontend.
¿Cómo hago para hacer la misma animación pero cuando la imagen se va totalmente hacia arriba y ya deja de verse? es decir la misma animación pero a la inversa
Hola midu, Me gustaria preguntarte si sabes de alguna universidad, college o institucion que me puedas recomendar para estudiar desarrollo web o de software de manera presencial en Barcelona. Gracias
Hola midu! hace tiempo veo tus videos y recientemente comencé a crear una red social! Sos diseñador gráfico profesional, pero no tengo casi conocimientos de programación jaja hice algunos ejemplos en mi canal... Tienes algunos consejos? Gracias por la buena energía!
A esos le echo en falta un text-align: justify; 🤣🤣🤣🤣🤣🤣 Bromas aparte, es una pasada, además que se puede aplicar a lo que quieras. ¡Gracias por compartir (casi) tocayo!
Midu, sabes cómo tener digamos, dos columnas, y que una de ellas tenga un scroll, la otra una imagen, y forzar al usuario a hacer scroll en ese box?, al usar la barra de scroll o el circulo del mouse, que fuerce primero que se llegue al fondo del scroll de ese box y luego continue con el scroll del sitio en general?
@midudev valdrá la pena usar panda-css en vez de styled-components? referente a la carga para el usuario, o que recomiendas usar? css modules, styled-components, panda-css, css (normal)...?
hola midu estoy copiando el codigo a mi hoja de estilos y los view me dice "Propiedad desconocida" y no me funciona pd: no me di cuenta y lo estaba probando en firefox en google chrome funciona perfecto
Hola, que tal? muchas gracias bro por los contenidos y las explicaciones, son de mucho valor para los que estamos aprendiendo. lo unico asi como te salen los errores tambien me salen, por que es, y como lo resuelvo?
Recien comienzo aprender css. Podrias decirme donde puedo consigir los terminos y la explicacion de ellos. Por ejemplo cuando usaste: image, block, show, entry, cover. ¿Donde consigo mas terminos como esos y la explicacion?
hola, tengo un problema utilice este método para darle animación a unas imágenes en una pagina que estoy diseñando y funciona perfecto en computadora y dispositivos android pero al abrir la pagina en un dispositivo con ios no se ve la animación, no se si alguien tenga el mismo problema o sepa como solucionarlo, muchas gracias.
En caso de que no funcione en un navegador hay algún polyfill para ello? En dicho caso si se me puede facilitar el link, es que aunque tengo actualizado chrome en su última versión no me funciona
En este caso tailwind no es un preprocesador sino un framework y respecto a la pregunta hay varias cosas que se pueden utilizar con css puro y se está incorporando CSS nesting que es algo muy cercano a Sass
Hola. Muchas gracias por tus enseñanzas :) Lo he aplicado para rotar una foto y agrandar unos DIV y, en ordenador, funciona perfectamente pero en móvil no actúa ¿Por qué puede ser? Un saludo.
hola hermano espero que te encuentres super bien, estoy en tu web para aprender JavaScript y el video que tienes de ejemplo no funciona. es el de Tu Primera Función . saludos 😊
¿Quieres el código? ¡Lo puedes ver aquí!
slug.vercel.app/s/scroll-css
te amo midu
Como se puede aplicar esa animación a un div?
No Solamente es útil, sino que lo explicas tan detalladamente que es muy difícil perderse y no entenderlo. Te agradezco mucho! Muy útil la verdad. Lograste algo que el chat gpt no podría razonar debido a la modernidad del tema.
Ni explica bien
Wow me encanta como con CSS se pueden hacer maravillas como estas. Explicas muy bueno, se puede entender claramente. Gracias por tu enseñanza.
Gracias a ti!
Muchas gracias Midu, he podido integrarlo en un proyecto para mi portfolio y la verdad que de una manera tan sencilla y con tan poco código queda la animación super profesional. Muchas gracias de nuevo, un saludo !!!
¡Justo estoy diseñando un blog! Video guardado porque esto lo añado sí o sí. ¡Esta muy buena! Gracias Midu
Ya contarás si lo usas! 🚀
Godiano god
Estoy tratando de darle mas seguimiento a tu contenido y que bueno que lo hice, esto de las animaciones en el scroll siempre ha sido un poquito complicado pero interesante para mi y BAM de pronto ya hay actualizaciones para trabajarlo con CSS puro, que bonito. Gracias Midu
Mucas gracias!!! :)
justo lo que necesitaba para darle un mejor toque al portafolio que estoy desarrollando, UN GRAN LIKE!!!!!
grande midu!! gracias por mantenernos actualizados! 🙌
Grande Midu! en 5 minutitos, una herramienta nueva y muy práctica!
increible que con solo unas lineas toda tu pagina pueda verse fresca dinamica y moderna. Se lo acabo de aplicar a las imagenes y a los parrafos y es una combinacion muy PRO .
Es injusto en tu caso, que yo solo te pueda dar un solo like 😩, haces contenido invaluable 😍
Muchas gracias, Josue! Tu like, aunque sea solo uno, me ayuda un montón. 🤗
Existen las multi cuentas, ok no jajaja
Pues ahora RUclips tiene un botón de "Gracias" jaja
Flaco, excelente contenido! Me vino al pelo para animar unas fotos. Like y suscripción para vos 🙌
Excelente aporte como siempre, si alguien quiere probarlo en Firefox además de cambiar el flag: layout.css.scroll-driven-animations.enabled, debe añadir el tiempo de la animación, sino no funciona. Ej: animation-duration: 1ms;
Sublime! Muchas más cosas como esta tendría que incorporar CSS de forma nativa. Sobre todo las cosas que se están tomando como estándares y que hay que hacer si o si con JS
Profe bendiciones, te doy muchas gracias por el video está muy bueno, sabes estás colocando últimamente videos sobre CSS muy buenos, me encanta CSS, me gusta mucho HTML y CSS, además estoy haciendo tu curso de HTML, nos vemos. Saludos desde Colombia 👍
Genial este video @midudev, siempre tienes un tema actualizado y lo explicas de fenomenal! Te felicito mucho 💪🏼🥳 y muchas gracias por compartir todo esto.
que buena información, estar al tanto y además aprender nuevas herramientas (por decirlos de alguna manera).
que buen trabajo, gracias
Sorprendente la evolución de CSS. Gracias por este video
Gracias por estos videos, ayudan mucho a entender el funcionamiento.
Increible todo lo q uno descubre viendo tus videos. Gracias
Buenísimo !!! Yo antes usaba AOS de michalsnik! Para hacer eso ! Ajaj saludos ! 💪🏼💪🏼
Pues mira, ahora sin bibliotecas!!
Muchísimas gracias! Queda muy elegante. IMPORTANTE: no se aplica en móviles. Hay alguna manera de que se vea? Gracias!
me super ayuda con lo que tengo planeado, muchas gracias por el aporte
Muy bueno! guardado para mis webs. Muchas gracias
Excelente!
Que locura, es increíble, me ha servido mucho, muchísimas gracias!!
Realmente útil, gracias a ti estoy mejorando en creación de paginas web!
Gracias @midudev , siempre innovando 👏👏👏👏
Midu. Cuando estudié CSS, creí, entonces, que con los temas visto me bastaba. He visto un par de tus videos y ahora no sé ni para qué molestarme en profundizar Javascript. ¿IntersectionObserver? ¿para qué? Todavía hay tanto que aprender de CSS que no pararé de ver tus vídeos Frontend.
Normalmente me cuesta entender a la primera códigos de css. Pero esto fue completamente comprensible. ❤ Gracias Midu!
Muy buen aprendizaje el día de hoy!! Gracias midu ;)
Una enseñanza buenísima, Muchas gracias Midu 👍
Gracias a ti!
De locos la potencia con 10 líneas en css lo que se puede montar ahora!
Ya ves! Y lo que queda!
Excelente como siempre midu!! Es soportada por todos los navegadores ya?
No, lo explico al inicio del vídeo
olle midu me gusto el detalle de acercar la camara al codigo en los momentos importantes. =) que grande eres xD
Gracias a ti por apreciar los detalles de la edición! 🤗
Una pregunta cuando subes un curso de css avanzado con esas técnicas tuyas?
¿Cómo hago para hacer la misma animación pero cuando la imagen se va totalmente hacia arriba y ya deja de verse? es decir la misma animación pero a la inversa
Muy chulo, se abren miles de posibilidades
Totalmente, esto es un ejemplo muy sencillo pero poco a poco veremos cosas más sorprendentes!
Pura calidad como siempre!
Hola midu, Me gustaria preguntarte si sabes de alguna universidad, college o institucion que me puedas recomendar para estudiar desarrollo web o de software de manera presencial en Barcelona. Gracias
Hola midu! hace tiempo veo tus videos y recientemente comencé a crear una red social!
Sos diseñador gráfico profesional, pero no tengo casi conocimientos de programación jaja hice algunos ejemplos en mi canal...
Tienes algunos consejos? Gracias por la buena energía!
Midu puedes probar la libreria de animacion Motion One?
La probaremos! 👍
muchisimas gracias, de gran utilidad la aportacion
A esos le echo en falta un text-align: justify; 🤣🤣🤣🤣🤣🤣
Bromas aparte, es una pasada, además que se puede aplicar a lo que quieras.
¡Gracias por compartir (casi) tocayo!
Jajajaja la madre que te parió
😇🤣😅@@midudev
Gracias, me sirve mucho estoy aprendiendo animaciones con CSS
Hermoso.
Tooootalmente! En un año lo vais a ver en todos laos!
@@midudev ya está en todos lados!! una genialidad midu!! gracias!
Muy buena, tio. Me gustaria saber si solo es posible usar con images o tambien funciona con contenedores.
Funciona con cualquier elemento
Que pasada!!! 😍😍
Me alegro que te gusteeee
Increíble... que poco a poco vaya quitando JS para agilizar algunas animaciones mediante CSS
Midu, sabes cómo tener digamos, dos columnas, y que una de ellas tenga un scroll, la otra una imagen, y forzar al usuario a hacer scroll en ese box?, al usar la barra de scroll o el circulo del mouse, que fuerce primero que se llegue al fondo del scroll de ese box y luego continue con el scroll del sitio en general?
hola excelente video, una pregunta, solo se puede utilizar con imagenes? con cajas como div, section o article no funcionan?
@midudev valdrá la pena usar panda-css en vez de styled-components?
referente a la carga para el usuario, o que recomiendas usar?
css modules, styled-components, panda-css, css (normal)...?
Totalmente un crack...gracias a practicar duro...
Gracias a ti!!
ESPECTACULAR !!!!!
EXCELENTE !!!!
FELICITACIONES !!!
hermosa data!
Muchas gracias midu! Podrias decir qué programa usas para grabar la pantalla? Está muy guay el efecto que hace con el zoom y al mover el cursor
Uso Screen Studio de macOs
WTF ME ACABO DE DAR CUENTA QUE NO ESTABA SUSCRITO A TU CANAL OMG
hola midu estoy copiando el codigo a mi hoja de estilos y los view me dice "Propiedad desconocida" y no me funciona
pd: no me di cuenta y lo estaba probando en firefox en google chrome funciona perfecto
Hola Miguel, gracias por el video. Qué programa usas para grabar/editar la pantalla y hacer los zooms al código?
Que interesante! Muchas gracias.
Gracias por comentar! 😌
Hola, que tal? muchas gracias bro por los contenidos y las explicaciones, son de mucho valor para los que estamos aprendiendo. lo unico asi como te salen los errores tambien me salen, por que es, y como lo resuelvo?
Recien comienzo aprender css. Podrias decirme donde puedo consigir los terminos y la explicacion de ellos. Por ejemplo cuando usaste: image, block, show, entry, cover.
¿Donde consigo mas terminos como esos y la explicacion?
Una pregunta amigo, Tuviste que poner class con esos nombres en el Html? O es algo que se puede usar como general sin alguna class En htnl
Maravilloso vídeo. Tienes un don.
Excelente informacion.. muchas gracias
se puede hacer con divs? osea que no solo con imagenes sino con cualquier contenido dentro de un div? como texto? videos etc...??
Me encanta lo bien que explicas
Puedo usar esto en Brackets? Ando aprendiendo a programar y estoy haciendo una página en HTML
Claro, sin problema. Brackets es un editor
Saludos muy buen dato. Es posible hacerlo también con media query? . Como lo harías?
hola, tengo un problema utilice este método para darle animación a unas imágenes en una pagina que estoy diseñando y funciona perfecto en computadora y dispositivos android pero al abrir la pagina en un dispositivo con ios no se ve la animación, no se si alguien tenga el mismo problema o sepa como solucionarlo, muchas gracias.
Hola! Cómo se llama la extensión que usas para que el ratón se te ponga como un + y salgan unas líneas para ver si están alineadas las cosas?
Es posible aplicar este efecto a los container?, o solo es para las imagenes?
tengo la misma pregunta. yo quiero lograr ese efecto pero en el contenedor principal
En mi empresa estamos pensando utilizar Storybook ¿Vale la pena usarlo? ¿Que tan bueno es usarlo con Tailwind CSS? saludos!
En caso de que no funcione en un navegador hay algún polyfill para ello? En dicho caso si se me puede facilitar el link, es que aunque tengo actualizado chrome en su última versión no me funciona
Hermoso esto.
¿Es verdad que CSS está evolucionando para no tener que usar preprocesadores como Sass, Tailwind o Less?
En este caso tailwind no es un preprocesador sino un framework y respecto a la pregunta hay varias cosas que se pueden utilizar con css puro y se está incorporando CSS nesting que es algo muy cercano a Sass
Hola, como se programa el css? , donde puedo ver info al respecto? Como la busco?
Muchas gracias Midu !!!
Con mucho gusto
Hola. Muchas gracias por tus enseñanzas :)
Lo he aplicado para rotar una foto y agrandar unos DIV y, en ordenador, funciona perfectamente pero en móvil no actúa ¿Por qué puede ser? Un saludo.
Y yo que estaba aprendiendo a usar GSAP y Framer Motion xD
Que curso de animaciones css me recomiendan ?
como flipa tio, será que que funciona en todos los navegadores con Gulp?
Midu tu siempre comentas que te parecen mejores las animaciones que entran y no salen. Como puedo lograr ese tipo de animacion con esto?
Buenas,
Muchas gracias por el vídeo. Lo he probado con un texto, y no me funciona ¿puede que sólo funcione con imágenes?
Un saludo.
css se va a comer a los lenguajes de a poquito.. de a poquito...
Gracias una vez más, midu!
Pero solo funciona para el móvil no en la PC😢
como hacer para que funcione en celulares android e ios?
Increíble!!! Esto se puede aplicar a textos también??
Por supuesto, yo lo utilizé en texto e imágenes
Ya me enseño prof Heydi
muy bueno!!!!!
que buen video y facil explicacion
Se me ocurre hacer un scroll Horizontal tipo menú de consola
Gracias por todo!!
A ti por comentar! 🤗
Alguien me puede ayudar me aparece esto (Property is experimental. Be cautious when using it.)
buenisimo recien me fije tien un html simple
gracias voy a practicarlo,te comento luego
hola hermano espero que te encuentres super bien, estoy en tu web para aprender JavaScript y el video que tienes de ejemplo no funciona. es el de Tu Primera Función .
saludos 😊
Se puede con Tailwind?
Claro, pero deberías usar las clases custom ya que no tiene utility classes nativas para esto todavía
Eres un crack..
Muy útil pero me gusta más cuando se renderizan a medida que vas scrolleando 😅
¿Y como se haría sin esa nueva opción usando solo CSS?
No se podría con CSS sin usar esto
@@midudev Ok, entiendo.
Con Javascript sería usando el IntersectionObserver y haciendo la animación con transform modificando la escala?
Buen aporte!
Gracias!!! 🤗