Texto animado con Css

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

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

  • @yesseniagonzalez7983
    @yesseniagonzalez7983 6 лет назад +18

    Es la primera ves que veo un vídeo suyo, y realmente me agrada la manera en la que explica, haciéndolo ver tan simple, he comprendido en 10 min lo que no he hecho en horas en las clases de mi U JAJAJAJAJA gracias, enserio.

  • @martinernestotorre6994
    @martinernestotorre6994 2 года назад +4

    Capoo !!! gracias por tus aulas de animaciones !! tenés la simpleza y la humildad de los grandes ! Saludos ! Argentina!

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

    Felicidades, de los pocos videos que se explican claramente, y a fin de cuentas Sí SIRVE (es que luego ni sirven, y uno nada más pierde tiempo) felicidades y gracias

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

    Hace mucho, mucho tiempo y aun sigue estando vigente! gracias por el tuto!

  • @danielmasim
    @danielmasim 7 лет назад

    Gracias no es el 1er video tuyo que veo, me sirvió para sacarme de otro problema que tenía con respecto al texto animado necesitaba se viera de lado a lado pero no conseguía desapareciese de forma "natural".
    Me ayudo verte para entender era el overflow.
    Slds.

  • @marcoantoniograus2989
    @marcoantoniograus2989 7 лет назад +1

    amigo, muy buen aporte..llevo poco tiempo y la plataforma que uso es dreamwever cc...este tutorial es lo que buscaba pero necesito pulir un poco mas para terminar..espero sigas apoyando de esta manera ..saludos

  • @mikesalinas5222
    @mikesalinas5222 4 года назад +1

    Excelentes aportes q haces .. Deberías ser maestro de programación, si lo haces me avisas...

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

    Muy byen tutorial , pienso aplicarlo en mi portafolios muchas gracias

  • @damyHarbi
    @damyHarbi 8 лет назад +2

    Tienes unos buenos tutoriales..! estoy aprendiendo desarrollo web y tus videos me ayudan a desarrollar imaginacion.. Gracias

  • @jorgenicolasgonzalez419
    @jorgenicolasgonzalez419 6 лет назад +1

    Buenos videos groso, esto es lo que estaba buscando un canal con animacion css , fantastico.

  • @jeffer.shorts
    @jeffer.shorts 6 лет назад +2

    Uff man, muchas gracias.. quería agregar a mi proyecto algo diferente a los de mis compañeros y de verdad me has ayudado mucho, felicidades y ya soy un suscriptor suyo!
    saludos.

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

    simplemente fabuloso. muchas gracias!

  • @estebanrenderin
    @estebanrenderin 8 лет назад +1

    Demasiado bien explicados cada uno de tus videos... muchas gracias por compartir

  • @claudioschneider4234
    @claudioschneider4234 8 лет назад

    Muy bueno como todos tus videos, excelente explicación sencilla y 100% argumentativa!.

  • @gexvillegas2579
    @gexvillegas2579 6 лет назад

    Excelente felicitaciones yo estoy empezando pero con tutoriales así voy aprendiendo rápido Gracias gracias

  • @pablor944
    @pablor944 5 лет назад +1

    Jean Carlo eres un genio

  • @lucasdiaz7302
    @lucasdiaz7302 4 года назад +2

    EXCELENTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE SOS CRACK, ENTENDÍ TODO SUPER BIEN GRACIAS!!!!1

  • @manolopajaroborras2205
    @manolopajaroborras2205 8 лет назад

    excelente tutorial compañero hace rato buscando efectos y al fin lo conseguí ya me suscribí a tu pagina muchas gracias por el aporte

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

    Wow Super bien explicado 😮👍

  • @wilwerrodriguez1787
    @wilwerrodriguez1787 8 лет назад

    muy buenos los tutoriales excelente profe....

  • @ManuelCastro-DevocionalDeHoy
    @ManuelCastro-DevocionalDeHoy 7 лет назад +1

    exelente aporte amigo deseo esten bien..supe que Peru sufrio inundaciones deseo este bien bendicones

    • @Jygproyectosweb
      @Jygproyectosweb  7 лет назад

      +Manuel Castro Hola Manuel, gracias por tus buenos deseos, por aquí no hemos sido afectados pero la situación es grave. Saludos y gracias.

    • @ManuelCastro-DevocionalDeHoy
      @ManuelCastro-DevocionalDeHoy 7 лет назад

      lo siento por su gente igual dese Dios les bendiga saludos estimado

  • @AlxRFM
    @AlxRFM 9 лет назад +1

    muchas gracias!! un efecto muy útil y sencillo para mis sitios web

  • @diyermorenohernandez8741
    @diyermorenohernandez8741 9 лет назад

    Saludos Desde Colombia, Muchas gracias Muy bien explicado!

  • @monomatizate
    @monomatizate 7 лет назад +1

    buenas noches, como siempre hermano gracias por los excelentes tutos son de mucha ayuda, con respecto a estas animaciones queria preguntar si hay una forma de colocarle un hover con stop, es decir, que cuando coloque el mouse arriba de la animación se detenga sea para leer bien lo que pasa u otra cosa, esto es posible?

  • @maytechnologies9504
    @maytechnologies9504 8 лет назад

    excelente jean carlo... ahora una pregunta cuál sería la modificación si necesitó la animación con desplazamiento horizontal ... y así sobreponer a un slider con imágenes...

  • @elenapena1844
    @elenapena1844 4 года назад +2

    Te pasaste crack, se que es muy sencillo pero me va a servir :`)

  • @verdadabsoluta2548
    @verdadabsoluta2548 8 лет назад

    Amigo muchas gracias la verdad, me ayuda bastante con los problemas de aprendisaje que tengo, Bendiciones.

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

    muchísimas gracias, me valió para el examen

  • @cervatestorresulisesemmanu6066
    @cervatestorresulisesemmanu6066 9 лет назад +1

    Excelente aporte. Muy buena explicación.

  • @nixnamulove
    @nixnamulove 9 лет назад

    hola! si es que quiero agregarle mas palabras para que se vean en la lista, que se tiene que modificar o agregar en la hoja de estilos?saludos

  • @yoeljavier8233
    @yoeljavier8233 7 лет назад +93

    body {
    background: tomato;
    }
    .contenedor {
    display: flex;
    width: 400px;
    height:40px;
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    button: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    }
    ul {
    list-style: none;
    padding-left: 10px;
    animation: cambiar 7s infinite;
    }
    ul, p {
    margin: 0;
    }
    @keyframes cambiar {
    0%{ margin-top: 0;}
    20%{ margin-top: 0;}
    25% { margin-top: -40PX;}
    50% { margin-top: -40PX;}
    55% { margin-top: -80PX;}
    80% { margin-top: -80PX;}
    85% { margin-top: -40PX;}
    95% { margin-top: -40PX;}
    100% { margin-top: 0;}
    }

  • @pedrofuentes4104
    @pedrofuentes4104 4 года назад

    excelente aporte....gracias

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

    Buenas, que pluggin es ese . cuando pusiste div.contenedor

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

    Genioo, muy util el video, gracias

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

    eres un autentico Crack!!

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

    hola, excelente tu video, pregunta, si tengo en mi pagina web un bar nav, y le pongo la animación, también altera la animación de la barra de navegacion, que hago ahi?, si solo quiero que esas letras se muevan y no altere o modifique nada mas, gracias

  • @jhonnathan0103
    @jhonnathan0103 8 лет назад

    Hola Jeancarlos, una consulta. Como puedo hacer para que una palabra animada este dentro de una oración. No al final sino al medio y todo ese bloque de palabras sea responsive. De antemano muchas gracias!
    Felicitaciones por tus videos!!!!

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

    muchas gracias, me resultó muy útil

  • @juandiaz6855
    @juandiaz6855 5 лет назад

    Muchas Gracias por tus videos .

  • @sombraaprendiz468
    @sombraaprendiz468 9 лет назад +1

    Amigo gracias por subir este tutorial saludos y sigue subiendo buenos tutos gracias

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

    Eres un genio!! muchas gracias jajaja

  • @luisenriquerodriguezruiz708
    @luisenriquerodriguezruiz708 6 лет назад

    hey bro, gracias, excelente video pero una pregunta... y si quiero agregar mas palabras para que se vayan recorriendo...??? es lo mismo...???

  • @youssh4975
    @youssh4975 7 лет назад

    Hola, una pregunta. En la animación, he puesto los mismos porcentajes y pixeles que tu y me va bien. Pero el tercer elemento de la lista se va muy rápido, no se esta dentro de los limites del div por tanto tiempo como los otros dos elementos y no queda muy bien. Como es eso?

  • @pablogutierrez1738
    @pablogutierrez1738 5 лет назад

    una pregunta como seria si fuera un ciclo o rotatorio por decir que Jeancarlos pase directo a mundo

  • @protoy3d44
    @protoy3d44 8 лет назад

    Buen dia esta muy buenos tus videos, una pregunta sobre este efecto o animación:
    ¿Que otro tipo de efectos se le puede agregar o de que otra manera puedo animar el texto que no solo se desplace hacia arriba y hacia abajo, para mas concreto me gustaría saber si se puede combinar las traslaciones de arriba y abajo como las de izquierda y derecha??
    O como tipo zoom de 0 a 1 etc...

  • @monomatizate
    @monomatizate 7 лет назад

    excelente tutorial como todos, tengo una pregunta con respecto a este, todo esta muy fácil y me salio perfecto solo hay un problema que cuando coloco el responsivo por ejemplo una medida 480 x 600 px el margin-top cambia y no se ve igual es decir las animaciones los textos no queda en el lugar correcto, en este caso como se hace porque los media query no funcionan con un @keyframe adentro gracias..

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

    Buen dato, sigue asi

  • @gochezz1483
    @gochezz1483 7 лет назад

    hola, no se si veras este comentario.. pero tengo una duda... se podria hacer esa animacion con varias imagenes?? o solo se puede hacer con textos??

  • @bibianacervantes8556
    @bibianacervantes8556 8 лет назад

    Hola que tal ¿Disculpa ese texto al momento de hacerlo responsivo que pasa con él?

  • @Narux
    @Narux 5 лет назад +1

    ESPAÑA SIEMPRE ARRIBA

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

    Gracias, te amo. Mesirve

  • @seric1821
    @seric1821 7 лет назад

    este gordito esta lleno de conocimiento :3

  • @ezequielahs1076
    @ezequielahs1076 5 лет назад

    Graciaas me hice un slider en css gracias a tu codigoo

  • @sandram.sibilskis2726
    @sandram.sibilskis2726 4 года назад

    Hola JeanCarlos, no consigo centrar el contenido del container como muestras en este video. Uso VS Code en lugar de Brackets. Me podrás ayudar con eso y contarme como puedo ver los elementos en el preview a medida que los seleccionas? es alguna extensión? Muchas gracias!

    • @josealejandrosuarez4189
      @josealejandrosuarez4189 4 года назад

      Para centrar es necesario ponerle un width y un height, sino no funciona

  • @ManuelCastro-DevocionalDeHoy
    @ManuelCastro-DevocionalDeHoy 7 лет назад

    ya lo logre hacer funcionar....no vi me faltaba poner los . un y coma en los pixeles en en keyframes cambiar { 0%{margin-top: 0px;} exelente..aporte amigo

  • @yerandienmanuel713
    @yerandienmanuel713 6 лет назад

    como se llama ese programa que usas en ese vídeo

  • @harrinsonA
    @harrinsonA 9 лет назад +1

    Gracias y me ha gustado bastante!

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

    Alguien sabe como se llama la extensión que permite ver el tamaño de los div

  • @spektrejazrodriguez4310
    @spektrejazrodriguez4310 7 лет назад +1

    Muy buen material, gracias!

  • @4dwiNN
    @4dwiNN 8 лет назад

    Ayuda!
    He hecho lo del video pero en mi caso tengo unos parrafos escritos debajo y realizan la animacion de subir y bajar, saben como hago para k los parrafos esten quietos?

  • @mauriciofernandez3142
    @mauriciofernandez3142 5 лет назад

    Cómo haces el atajo de ul ?

  • @AlejandroHernandez-ey1zu
    @AlejandroHernandez-ey1zu 8 лет назад

    muy bien explicados ¡gracias!

  • @computronictecnology6316
    @computronictecnology6316 7 лет назад

    como se llama el programa que usas ?

  • @Dicomenzo
    @Dicomenzo 8 лет назад +1

    Muy buenos tutoriales amigo!! saludos

  • @migpagola
    @migpagola 9 лет назад

    Que crack sigo todos tus videos! :)

  • @fermede7763
    @fermede7763 7 лет назад

    Hola buenas noches, tengo una regunta y si son 5 ul como debo de poner los frames ..??
    Espero y me puedan contestar por favor, y que sigan estando bien, gracias.

  • @alejandro18942571
    @alejandro18942571 7 лет назад

    saludos, hay forma de manejar los @keyframes con tiempos y no con porcentajes?

  • @datacops
    @datacops 8 лет назад +1

    Excelente ! me gusta el efecto Like !

  • @spiderick88
    @spiderick88 9 лет назад

    hola tengo el problema que no solo tengo ese texto en la pagina sino q tengo mas elementos y todo me los mueve, no hay la posibilidad que mueva solo lo que esta en el div especifico

  • @CarolinaED-ez6mo
    @CarolinaED-ez6mo 2 года назад

    muchisimas gracias!!!!

  • @hibercom5689
    @hibercom5689 8 лет назад

    Hola amigo,
    Tendrás algún vídeo donde trabajes fuentes y tamaños de texto....

  • @josefalcon1223
    @josefalcon1223 6 лет назад

    hola amigo buen dia como haria este efecto horizontal en vez de vertical gracias saludos

  • @jorgebaron.b4807
    @jorgebaron.b4807 5 лет назад

    MUCHISIMAS GRACIAS!!! GENIAL TU VIDEO, MUY BIEN EXPLICADO

  • @farrithfarrith456
    @farrithfarrith456 7 лет назад

    como agrego estoy proyectos a una pagina web con un dominio ya existente

  • @pabloantonio7148
    @pabloantonio7148 6 лет назад

    Eres un capo!!! Gracias!!!

  • @soportesistemas1932
    @soportesistemas1932 5 лет назад +1

    hola, gracias por el video, lo seguí, lo realice y todo salio correcto, el problema es al querer implementarlo con mas contenido, lo puse dentro de un contenedor principal en una pagina y todo se mueve, he visto otros videos incluso en ingles con ligeras variaciones en tu código, pero al final producen el mismo efecto al interactuar con mas contenido y es que toda la pagina se mueve de acuerdo a como va cambiando el margin-top de la animación, sabes como solucionar esto y por que se produce este efecto, gracias y saludos ...

  • @carlosgonzales1317
    @carlosgonzales1317 4 года назад

    Gracias amigo muy buen tutorial, una consulta, como hacer para combinar esto que nos explicas muy bien en estos 2 de tus videos (“Efecto máquina de escribir con CSS” & “Texto animado con Css”) es decir que cambie el texto, pero conservando el efecto de máquina de escribir. Gracias y nuevamente felicitaciones.

  • @alexvasquez2510
    @alexvasquez2510 4 года назад

    muchísimas gracias

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

    ya me suscribi 🥴🤙

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

    Gracias! Me re sirviooo

  • @sergiocruzcardenas6937
    @sergiocruzcardenas6937 7 лет назад

    hola que tal amigo no se si me puedas ayudar, me salio bien este texto y gracias por eso, pero si agrego otra cosa como una imagen o algun texto y se suben conforme a la animacion y desaparece de la pantalla asta que buelbe a bajar.
    si me pudieras ayudar con eso estaria muy agradecido.

  • @kalynaramos3632
    @kalynaramos3632 9 лет назад

    Hola amigo? me gustaria saber cual es el programa que usas para estar editando la pagina web y viendo al lado. agradezco atencion.

    • @Jygproyectosweb
      @Jygproyectosweb  9 лет назад +1

      +Kalyna Ramos Brackets ruclips.net/video/UngFUMhv2TY/видео.html

  • @agustin5354
    @agustin5354 5 лет назад

    Como haces para que se vaya actualizando constantemente el navegador?

  • @albertosantiago3895
    @albertosantiago3895 7 лет назад

    buenos dias Jean Carlos, estoy usando a NetBeans y quiero tomar la animacion en una pagina .php, eh echo todo tal cual y no me esta resultando hay algun problema con lo formato.=======>>>> ya se resolvio hermano muchas bendiciones para tu canal

  • @joanrodriguez7345
    @joanrodriguez7345 8 лет назад

    muy bueno gracias hermano

  • @juanmusictutoriales985
    @juanmusictutoriales985 8 лет назад

    muy buenos tutoriales

  • @angelgautreaux8089
    @angelgautreaux8089 5 лет назад

    Tengo una pregunta.
    ¿como evito que las otras ul se mueban?

  • @luisescalona8505
    @luisescalona8505 7 лет назад

    Gracias por el tutorial pero mi Chrome y Mozilla no mueven el texto, quizas es un error tonto que no he visto pero si no es eso ¿porque puede ser que no se mueva el texto?

  • @ricardojuarez8842
    @ricardojuarez8842 7 лет назад

    Que puedo hacer si display flex no funciona? Las letras se enciman y no se alinean

  • @franmejia5210
    @franmejia5210 7 лет назад

    agregare esta animacion ami pagina web en la presentacion.. buen video

  • @mananaesundiaimportante7652
    @mananaesundiaimportante7652 8 лет назад +1

    Hola JG, una colsulta, comó haces para editar en sublime y al mismo tiempo ver los resultados en el explorador. Gracias por los videos!!.

  • @janroc3317
    @janroc3317 8 лет назад +2

    Buen vídeo amigo.

  • @samuelsouza6282
    @samuelsouza6282 4 года назад

    Como faz para adicionar mais textos para rodar na lista? Só fica animando três linhas

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

    muchas gracias capo

  • @ediciones.tedeboldo
    @ediciones.tedeboldo 6 лет назад

    Muchas gracias! Excelente! Ayuda mucho

  • @ranfis27
    @ranfis27 6 лет назад

    Hola amigo , muchas gracias por tus videos.
    Me podrias decir como programar en Sublime y al instante te aparece en el navegador?.
    Con todo respeto , espero su respuesta.

  • @luisbarreras5032
    @luisbarreras5032 6 лет назад

    Muy Bien!

  • @AlexdobleU
    @AlexdobleU 8 лет назад

    Nuevamente gracias

  • @Mel-sv9nq
    @Mel-sv9nq 3 года назад

    Gracias!!!

  • @luzelenamontoya2618
    @luzelenamontoya2618 8 лет назад

    Excelente video, muy buen aporte, gracias. Como me inscribo a sus cursos tipo paga

    • @Jygproyectosweb
      @Jygproyectosweb  8 лет назад

      Hola Luz, por ahora no tenemos cursos de paga.