No video
Animaciones CSS a través del Scroll sin necesidad de JavaScript. 100% nativo
Рет қаралды 90,383
Күн бұрын¡Crea animaciones CSS según la posición del scroll en tu web!
¿Y sabes lo mejor? ¡Sin JavaScript!
Desbloquea un montón de posibilidades y tiene ventajas:
- Mucho mejor rendimiento
- Animaciones que se sienten más nativas
- Muy sencillo de implementar
Y ya ves que son unas pocas líneas de código.
Por ahora sólo es compatible con la última versión de Chrome y Edge.
Pero eso ya es casi un 40% de soporte.
¡Dime qué te parece y deja un ❤️ si no lo sabías!
@midudev Жыл бұрын
¿Quieres el código? ¡Lo puedes ver aquí! slug.vercel.app/s/scroll-css
@Undead34 11 ай бұрын
te amo midu
@luis-peligro8796 9 ай бұрын
Como se puede aplicar esa animación a un div?
@Undermax Жыл бұрын
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.
@juancarlosaguilarherrera6869 8 ай бұрын
Ni explica bien
@johnelith2763 Жыл бұрын
Wow me encanta como con CSS se pueden hacer maravillas como estas. Explicas muy bueno, se puede entender claramente. Gracias por tu enseñanza.
@midudev Жыл бұрын
Gracias a ti!
@josuealvarez1657 Жыл бұрын
Es injusto en tu caso, que yo solo te pueda dar un solo like 😩, haces contenido invaluable 😍
@midudev Жыл бұрын
Muchas gracias, Josue! Tu like, aunque sea solo uno, me ayuda un montón. 🤗
@royeranguloolivera2435 Жыл бұрын
Existen las multi cuentas, ok no jajaja
@lestherxm 9 ай бұрын
Pues ahora KZfaq tiene un botón de "Gracias" jaja
@DeibyA 3 ай бұрын
justo lo que necesitaba para darle un mejor toque al portafolio que estoy desarrollando, UN GRAN LIKE!!!!!
@PlayerCode Жыл бұрын
¡Justo estoy diseñando un blog! Video guardado porque esto lo añado sí o sí. ¡Esta muy buena! Gracias Midu
@midudev Жыл бұрын
Ya contarás si lo usas! 🚀
@sebasc2232 Жыл бұрын
Godiano god
@ismaelrey3029 5 ай бұрын
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 !!!
@aureaargaiz4762 Жыл бұрын
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
@midudev Жыл бұрын
Mucas gracias!!! :)
@tomasstabilini4309 3 ай бұрын
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 .
@davdev1987 Жыл бұрын
grande midu!! gracias por mantenernos actualizados! 🙌
@codesandtags Жыл бұрын
Genial este video @midudev, siempre tienes un tema actualizado y lo explicas de fenomenal! Te felicito mucho 💪🏼🥳 y muchas gracias por compartir todo esto.
@quinivideos Жыл бұрын
Grande Midu! en 5 minutitos, una herramienta nueva y muy práctica!
@cesarpacheco9155 5 ай бұрын
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 👍
@terryadityaildefonsochagua3710 Жыл бұрын
Gracias @midudev , siempre innovando 👏👏👏👏
@nickoriver Жыл бұрын
Muy bueno! guardado para mis webs. Muchas gracias
@midudev Жыл бұрын
Excelente!
@DavidRodriguez-uj4ls 8 ай бұрын
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
@rafaelmarcano600 11 ай бұрын
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.
@cristianferreira3350 Жыл бұрын
Buenísimo !!! Yo antes usaba AOS de michalsnik! Para hacer eso ! Ajaj saludos ! 💪🏼💪🏼
@midudev Жыл бұрын
Pues mira, ahora sin bibliotecas!!
@YanezFrank Жыл бұрын
Excelente como siempre midu!! Es soportada por todos los navegadores ya?
@midudev Жыл бұрын
No, lo explico al inicio del vídeo
@M3S3RIASU 3 ай бұрын
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!
@midudev Жыл бұрын
Jajajaja la madre que te parió
Жыл бұрын
😇🤣😅@@midudev
@matifiordelli3886 3 ай бұрын
Increible todo lo q uno descubre viendo tus videos. Gracias
@mabyes Жыл бұрын
Normalmente me cuesta entender a la primera códigos de css. Pero esto fue completamente comprensible. ❤ Gracias Midu!
@mariapirsch3683 10 ай бұрын
Flaco, excelente contenido! Me vino al pelo para animar unas fotos. Like y suscripción para vos 🙌
@Hops28 8 ай бұрын
¿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
@CristianMunoz-sl6yj Жыл бұрын
que buena información, estar al tanto y además aprender nuevas herramientas (por decirlos de alguna manera). que buen trabajo, gracias
@Fran_Lora Жыл бұрын
Que pasada!!! 😍😍
@midudev Жыл бұрын
Me alegro que te gusteeee
@waltersosa5647 Жыл бұрын
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;
@peiboll2504 Жыл бұрын
De locos la potencia con 10 líneas en css lo que se puede montar ahora!
@midudev Жыл бұрын
Ya ves! Y lo que queda!
@miguelangelmurcialeon4437 Жыл бұрын
Muy chulo, se abren miles de posibilidades
@midudev Жыл бұрын
Totalmente, esto es un ejemplo muy sencillo pero poco a poco veremos cosas más sorprendentes!
@elcanaldenick Жыл бұрын
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!
@davidcode22 Жыл бұрын
Sorprendente la evolución de CSS. Gracias por este video
@valentinfeller121 Жыл бұрын
css se va a comer a los lenguajes de a poquito.. de a poquito...
@mundoextrano8892 Жыл бұрын
Una enseñanza buenísima, Muchas gracias Midu 👍
@midudev Жыл бұрын
Gracias a ti!
@jDelestal94 4 ай бұрын
Siempre al detalle midu, un crack !
@magoxxii Жыл бұрын
hermosa data!
@lacuevadelinsecto Жыл бұрын
Pura calidad como siempre!
@herlylinarez4280 Жыл бұрын
Muy buen aprendizaje el día de hoy!! Gracias midu ;)
@SantyDLP_ Жыл бұрын
Realmente útil, gracias a ti estoy mejorando en creación de paginas web!
@alexblue24 7 ай бұрын
Que locura, es increíble, me ha servido mucho, muchísimas gracias!!
@DraquioOficial Жыл бұрын
Hermoso.
@midudev Жыл бұрын
Tooootalmente! En un año lo vais a ver en todos laos!
@LucasBerazadi 2 ай бұрын
@@midudev ya está en todos lados!! una genialidad midu!! gracias!
@paginas-web807. Жыл бұрын
Una pregunta cuando subes un curso de css avanzado con esas técnicas tuyas?
@sorcerereye Жыл бұрын
Hermoso esto. ¿Es verdad que CSS está evolucionando para no tener que usar preprocesadores como Sass, Tailwind o Less?
@emmywebgi639 Жыл бұрын
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
@jsalper1278 2 ай бұрын
@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)...?
@polcruz4739 5 ай бұрын
Muchísimas gracias! Queda muy elegante. IMPORTANTE: no se aplica en móviles. Hay alguna manera de que se vea? Gracias!
@matias278 Жыл бұрын
Midu puedes probar la libreria de animacion Motion One?
@midudev Жыл бұрын
La probaremos! 👍
@jjsegna Жыл бұрын
muy bueno!!!!!
@hopersk8 Жыл бұрын
Totalmente un crack...gracias a practicar duro...
@midudev Жыл бұрын
Gracias a ti!!
@hegnisrivera2643 Жыл бұрын
Que interesante! Muchas gracias.
@midudev Жыл бұрын
Gracias por comentar! 😌
@victor141516 Жыл бұрын
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
@midudev Жыл бұрын
Uso Screen Studio de macOs
@sergicodina4760 Жыл бұрын
Increíble... que poco a poco vaya quitando JS para agilizar algunas animaciones mediante CSS
@camiladomato 9 ай бұрын
Muchas gracias Midu !!!
@midudev 9 ай бұрын
Con mucho gusto
@teveoenlaweb Жыл бұрын
Wooow, excelente
@DKMRFCBrlz 7 ай бұрын
WTF ME ACABO DE DAR CUENTA QUE NO ESTABA SUSCRITO A TU CANAL OMG
@alexanderburgos2885 Жыл бұрын
Muy buena, tio. Me gustaria saber si solo es posible usar con images o tambien funciona con contenedores.
@midudev Жыл бұрын
Funciona con cualquier elemento
@tatanjer Жыл бұрын
Gracias, me sirve mucho estoy aprendiendo animaciones con CSS
@isaacleon9464 Жыл бұрын
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
@eduardoromero621 Жыл бұрын
Es posible aplicar este efecto a los container?, o solo es para las imagenes?
@juancruznieto3132 Жыл бұрын
tengo la misma pregunta. yo quiero lograr ese efecto pero en el contenedor principal
@oscargicast 11 ай бұрын
Hola Miguel, gracias por el video. Qué programa usas para grabar/editar la pantalla y hacer los zooms al código?
@matrizx-diseno-grafico Жыл бұрын
ESPECTACULAR !!!!! EXCELENTE !!!! FELICITACIONES !!!
@felipedev_ Жыл бұрын
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
@msm302 Жыл бұрын
olle midu me gusto el detalle de acercar la camara al codigo en los momentos importantes. =) que grande eres xD
@midudev Жыл бұрын
Gracias a ti por apreciar los detalles de la edición! 🤗
@jeanmigueluzcateguigonzale4078 Жыл бұрын
Excelente informacion.. muchas gracias
@DiegoBarrios-xl9mw Ай бұрын
Sos un crack Midu
@JuanFcoHGon2014 Жыл бұрын
Me encanta lo bien que explicas
@rodrigogonzalez4893 Жыл бұрын
Gracias por todo!!
@midudev Жыл бұрын
A ti por comentar! 🤗
@alejandropacheco5435 3 ай бұрын
Tremendo máquina!
@irunasion1885 6 ай бұрын
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
@igorerdoiza8725 Жыл бұрын
Maravilloso vídeo. Tienes un don.
@terry- Жыл бұрын
Genial!
@domingofeliz6294 Жыл бұрын
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?
@angang5643 4 ай бұрын
que buen video y facil explicacion
@crisss175 Жыл бұрын
Puedo usar esto en Brackets? Ando aprendiendo a programar y estoy haciendo una página en HTML
@midudev Жыл бұрын
Claro, sin problema. Brackets es un editor
@lautaroriveiro Жыл бұрын
Gracias una vez más, midu!
@enriqueruiz320 Жыл бұрын
😱 👏👏👏
@pipegoods Жыл бұрын
Buen aporte!
@midudev Жыл бұрын
Gracias!!! 🤗
@nico.8046 11 ай бұрын
Increíble!!! Esto se puede aplicar a textos también??
@barf20 10 ай бұрын
Por supuesto, yo lo utilizé en texto e imágenes
@LuisJimenez-rq6wk 3 ай бұрын
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.
@justanotheruser7885 10 ай бұрын
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?
@joserbernabeu 10 ай бұрын
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.
@valerianavarro7654 9 ай бұрын
Que curso de animaciones css me recomiendan ?
@marcoantonionunezcosinga7828 10 ай бұрын
Saludos muy buen dato. Es posible hacerlo también con media query? . Como lo harías?
@luishernandez98 Жыл бұрын
En mi empresa estamos pensando utilizar Storybook ¿Vale la pena usarlo? ¿Que tan bueno es usarlo con Tailwind CSS? saludos!
@jairsonrangel1900 Жыл бұрын
Eres un crack..
@TheQonde 10 ай бұрын
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 😊
@LeandroVilanovaDev Жыл бұрын
Y yo que estaba aprendiendo a usar GSAP y Framer Motion xD
@gamuro6977 2 ай бұрын
Midu tu siempre comentas que te parecen mejores las animaciones que entran y no salen. Como puedo lograr ese tipo de animacion con esto?
@peruanoOP Жыл бұрын
Muy útil pero me gusta más cuando se renderizan a medida que vas scrolleando 😅
@jonathancoder Жыл бұрын
como flipa tio, será que que funciona en todos los navegadores con Gulp?
@giovannygarzonsoto Жыл бұрын
muy bueno
@Fabri-bn2lv 8 ай бұрын
Alguien me puede ayudar me aparece esto (Property is experimental. Be cautious when using it.)
@hugocangi6214 8 ай бұрын
buenisimo recien me fije tien un html simple gracias voy a practicarlo,te comento luego
@marcoshernanz1 11 ай бұрын
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?
@leo_perez_2023 10 ай бұрын
Hola, como se programa el css? , donde puedo ver info al respecto? Como la busco?
@angeltwice Жыл бұрын
se puede hacer con divs? osea que no solo con imagenes sino con cualquier contenido dentro de un div? como texto? videos etc...??
@kafr9102 8 ай бұрын
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
@sebasath4521 5 ай бұрын
No se que estoy haciendo mal pero no me funciona:/
Жыл бұрын
que pasada, 😂 gracias midu
@sierra6460 Жыл бұрын
Excelente video 👍
@midudev Жыл бұрын
Gracias!
@th3ja 7 ай бұрын
Sos un crack !
Cool Items Official
Рет қаралды 41 МЛН
midudev
Рет қаралды 119 М.
Online Tutorials
Рет қаралды 2 МЛН
CodelyTV - Redescubre la programación
Рет қаралды 180 М.