Como Animar elementos al Scrollear | Animate on Scroll (Javascript)

Поделиться
HTML-код
  • Опубликовано: 28 янв 2025

Комментарии • 70

  • @FalconMasters
    @FalconMasters  3 года назад +12

    Si te gusto el video dale manita arriba 👍
    Y no olvides suscribirte para mas tutoriales geniales!

    • @alexcalle5391
      @alexcalle5391 2 года назад

      si usase scroll snap quedaria todavia mas guapo

  • @franciscosantiagocruz9867
    @franciscosantiagocruz9867 3 года назад +4

    Cada que me surge algo para mis páginas salen videos tuyos con lo que necesito hahaha muy agradecido falcon a probar se ha dicho

  • @santiagomarquez4771
    @santiagomarquez4771 Год назад

    Muchas gracias hermano ! Un cliente me pidió que la web tenga animaciones y la verdad que esta librería te lo resuelve fácilmente.

  • @angelicaespinoza4952
    @angelicaespinoza4952 2 года назад +1

    Waaaw! Que increíble forma de explicar, dinámico y con los recursos listos para usarse! Mi reconocimiento para ti 👏👏

  • @CodifyTeam
    @CodifyTeam Год назад

    Master !!! eres mi persona favorita jajaja gracias por la librearía y muy buena explicacion.

  • @crearelectronica
    @crearelectronica 3 года назад +1

    Gracias por compartir tu conocimiento.... Saludos desde Cali Colombia...

  • @d.a2508
    @d.a2508 2 года назад

    Muy buen video. Simple, corto y facil de implementar.

  • @ElSquins
    @ElSquins Год назад

    UFFF, excelente! Me suscribo YA! Tremendo contenido!

  • @noscirf8393
    @noscirf8393 3 года назад +2

    Top 10 programadores a los que se debe de admirar:

  • @emmanuelsarmiento1096
    @emmanuelsarmiento1096 2 года назад

    Justo el vídeo que necesitaba para un proyecto. Fácil de entender y bien explicado me sirvió para lo que necesitaba y le dio el toque de calidad que necesitaba mí página. Gracias

  • @antonioponce5938
    @antonioponce5938 2 года назад

    ¡El video está genial, como siempre un 10, actualmente uso en algunos proyectos anímate.css con wow , pero AOS me parece una buena alternativa!

  • @Jesusw3574
    @Jesusw3574 6 месяцев назад

    This man is admiration🎉

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 3 года назад +5

    Hola , de casualidad habrán mas videos asi para hacer cosas con Css , van geniales , eso de animar cosas y etc , se agradece

  • @tiagoae
    @tiagoae 2 года назад

    que buen aporte, gracias crack!! 👍

  • @namyhanae
    @namyhanae Год назад

    Siempre sacando de apuros!! eres el mejor !!! (>^^)>

  • @Alansito
    @Alansito 2 года назад

    Que buen video buen onvre que tenga un excelente dia

  • @holgeredudangulocastillo645
    @holgeredudangulocastillo645 3 года назад

    Se be excelente esa animación haciendo scroll, rempe la monotonía del antiguo scroll

  • @alexandrodev_
    @alexandrodev_ 3 месяца назад

    chapa tu like hermano gracias

  • @Zaiinsss
    @Zaiinsss 3 года назад

    que god este canal

  • @laraalbornoz6388
    @laraalbornoz6388 2 года назад

    GRACIAS, SOS UN GENIO

  • @juancampos352
    @juancampos352 3 года назад +1

    Que buena librería 👌

  • @jonatan84
    @jonatan84 2 года назад

    Excelente explicación!!

  • @kalednarino7868
    @kalednarino7868 2 года назад

    Wao que sencillo
    gracias

  • @zeroam5
    @zeroam5 2 года назад

    Buen videooo!

  • @diegoarivera35
    @diegoarivera35 2 года назад

    mil gracias!!! crack

  • @FrankoEmSo
    @FrankoEmSo 3 года назад

    Me encantó este video, tienes material muy bueno! Qué otras librerías similares a esta puedo utilizar para mis páginas principiantes?

  • @pbarrio.sisinfo
    @pbarrio.sisinfo Год назад +1

    Es responsivo?
    o como se haria para que sea resp?

  • @Henry_Nunez
    @Henry_Nunez 3 года назад +1

    Excelente video. Buena explicación. Mi duda es la siguiente: Esta página una vez culminada y colocándole el *script* antes del *body* funciona sin tener conexión a internet ? si la respuesta es *"no funcionaría"* entonces que pasos tendría que hacer para que funcione ? muchas gracias.

    • @FalconMasters
      @FalconMasters  3 года назад +4

      La pagina funciona sin internet pero el Script no, porque ese es un enlace a un archivo hosteado en internet.
      Si quieres que el sitio funcione sin internet simplemente tienes que entrar al enlace que relacionamos y guardar el archivo dentro de tu proyecto con la extensión .js
      Y luego desde tu archivo html lo llamas.

  • @luislaol2031
    @luislaol2031 2 года назад

    Excelente Carlos Arturo, me funciona bien solo que me descuadra lo responsive, alguna foema de solucionarlo?

  • @francoavila1499
    @francoavila1499 2 года назад

    muito profesional mainito

  • @inusual9611
    @inusual9611 2 года назад

    Buen video

  • @rafapaez57
    @rafapaez57 3 года назад +1

    Hola, el agregar estas animaciones me presenta problema, ya que los márgenes como que se desplazan porque el position stichy lo toma casi oculto, los botones de menu inferiores los desplaza hacia abajo, es decir, fuera de vista. ¿sabe cómo puedo solucionarlo?

  • @serranomatas
    @serranomatas 2 года назад

    Hola, consulta se puede aplicar a una class solamente y no estar colocando la animación de manera repetida??

  • @joacoconut
    @joacoconut 6 месяцев назад

    hay un problema y es que si recargo la pagina los elementos que esten dentro del div ya no se ven (siguen estando ahi pero simplemente no se ven) como se arregla eso?

  • @angeleakane1189
    @angeleakane1189 Год назад

    Gracia

  • @angelgabrielgarciarangel133
    @angelgabrielgarciarangel133 3 года назад

    Buen vídeo. Cuál tema usas para el VSCODE? se ve muy bonito y agradable.

  • @VadFi
    @VadFi 3 года назад

    Buen día, tendrás un link de descuento para tu curso en Udemy de Booststrap 5? sería de mucha ayuda la verdad. Gracias y saludos.

  • @danielgonzalezvictoriano1763
    @danielgonzalezvictoriano1763 2 года назад

    Hola.
    Tengo una duda. Estoy realizando una página web, la cual tiene una ventana modal. Deseo agregar estos efectos a los elementos de ese modal; lo intente pero no resultó. Así mismo, en esa ventana tengo unas barras de progreso animadas con CSS. Comprobé que la animación si se realiza, solo que al momento de abrir el modal esta ya finalizó, es como si no hubiese animación; no se si pase lo mismo con la animación de los elementos al hacer scroll. Mi punto es saber si existe un método o código que detenga las animaciones hasta el momento en que el usuario abra el modal y que estas se empiecen a ejecutar al momento que visualice el modal y haga scroll.
    Gracias

  • @10tronic
    @10tronic 3 года назад

    He visto un efecto en el que las fotos son más grandes y es como si se recorriera de arriba a abajo pero está hecho en WordPress, es difícil hacerlo en Javascript?

  • @AR7editing
    @AR7editing 3 года назад

    Hola Falcon me gustan muchos tu video pero me surge una duda, ¿por que usas el script antes del body y no en el head con un "defer"?, sorry si es una pregunta estupida pero ando en el proceso de aprendizaje, sigue con el contenido que es excelente

    • @FalconMasters
      @FalconMasters  3 года назад

      Hola, no te preocupes de hecho es una muy buena observacion. La respuesta es que estoy acostumbrado a ponerlo debajo antes del cierre del body. Voy a intentar usar el atributo en los proximos videos para variar un poco.
      Saludos!

    • @AR7editing
      @AR7editing 3 года назад

      @@FalconMasters muchas gracias Falcon, es que estaba confundido y pensé en lo del rendimiento, ya he aprendido algo nuevo hoy , saludos

  • @DanielBallester21
    @DanielBallester21 3 года назад

    Seguramente ya se hablo mucho del tema, pero conviene hacer animaciones ?? lo digo por la velocidad de carga. Recomiendan hacer todo el código puro o usar librerías ??

    • @FalconMasters
      @FalconMasters  3 года назад

      No veo el problema, siempre y cuando lo hagas con moderación. Si tienes muchas animaciones entonces si hay que tener cuidado y optimizar el código.

    • @DanielBallester21
      @DanielBallester21 3 года назад

      @@FalconMasters gracias por responder :) voy a ponerlo en practica.

  • @germanpinto883
    @germanpinto883 2 года назад

    tienes este video pero usando react?

  • @JuanCHB_88
    @JuanCHB_88 Год назад

    existe depronto una libreria que en vez de aplicar movimientos aplique estilos, como cambio de color, letras, etc algo asi? saludos

    • @FalconMasters
      @FalconMasters  Год назад

      Si los frameworks como bootstrap hacen eso.

  • @danieldavidcalderon9850
    @danieldavidcalderon9850 2 года назад

    Grande hermano, muy bien explicado, buen video (☞゚ヮ゚)☞

  • @juancarlosmamanirojas865
    @juancarlosmamanirojas865 Год назад

    Arturooooooo!!!!

  • @gabrielrincon6744
    @gabrielrincon6744 3 года назад

    A lo mejor pido demasiado , pero falconmaster tu podrías hacer una práctica de chat de contactos tipo WhatsApp para poder enviar mensajes y recibirlos , y disculpa es que me gustaría que hiciera una práctica de esto

  • @ProgramaThor
    @ProgramaThor 2 года назад +1

    ¿Cómo puedo aplicar esto al angular?

  • @3z3kp0
    @3z3kp0 Год назад

    Master

  • @maxshoot2848
    @maxshoot2848 2 года назад

    bro cuando agrego el Href de AOS mi css eterno ya no funciona ._. q hago?

  • @History.channel.x
    @History.channel.x 2 года назад

    Cómo le agrego un pequeño texto debajo de las fechas? :c

  • @julio-o1o
    @julio-o1o Год назад

    me pasa por encima de la barra de navegacion como evito eso

    • @FalconMasters
      @FalconMasters  Год назад

      Investiga sobre la propiedad z-index con esa lo solucionas.

  • @hugosegoviano
    @hugosegoviano 2 года назад

    Funciona para React?

    • @nahuelolmos2215
      @nahuelolmos2215 2 года назад

      hola, si yo lo probre pero suerge un problema que cuando lo queres adaptar a un componete, tenes que agregar la funcion "AOS.init()" dentro del componente, para que cadaves que se renderice el componete carge las animaciones, por que sino te quedan en blanco.

  • @smithshelby8012
    @smithshelby8012 2 года назад

    Hice tal cuál las cosas y no funciona:(

  • @levialviter2302
    @levialviter2302 2 года назад

    Muy fácil de usar y la librería no pesa nada

  • @ivanzq21
    @ivanzq21 3 года назад

    *Hola tus voz se parece algo al chico de la "Pildora magica", es otro canal de RUclips sobre desarrollo personal, eres tu el mismo? o es otro?* 🙄

    • @FalconMasters
      @FalconMasters  3 года назад +1

      No, solo tengo este canal de RUclips.