Efecto máquina de escribir con CSS

¡Gracias a todos por su apoyo, llegamos a los 3000 suscriptores!
Video sobre las curvas de la animación: • Cómo usar la propiedad...
Otras animaciones: • Nubes animadas con CSS
• Banner animado con HTM...
Síguenos en facebook: / jygproyectosweb
Síguenos en Twitter:
/ jygproyectosweb
Nuestro sitio oficial: jygproyectosweb...

[@jonathanalcocer6549]

Ya más de 5 años y sus vídeos siguen siendo de gran ayuda!

[@ITANHEIL]

7 años después y tu video me acaba de ser muuuy útil, contenido de calidad, felicidades y muchas gracias :)

[@maytearenal7206]

Pues me encanta que compartas "lo poco que sabes" con nosotros. ¡¡¡ GRACIAS, GRACIAS, GRACIAS !!!

[@jhonbarcasnegras]

Excelente. Sorprende por su sencillez ya que pensé que se haría con javascript o algo así. No conocía este canal, pero ya tiene un suscriptor más.

[@Jygproyectosweb]

+Jhon Barcasnegras ¡Muchas gracias! Recién abrimos el canal hace 5 meses, gracias por seguirnos.

[@JaimieVega]

Y seguimos por los 10.000, gracias a ti tambien por tus tutoriales y compartir tus conocimientos

[@the_lobito8956]

Desde Menorca, España, eres un crack!!!! Muchsimas gracias

[@ecos_jc]

Me alegro contigo al sentirse uno parte de los 3000 y saber que siempre son muy didácticos y educativos tus videos. Ya me he descargado el Brackets y he comenzado a comprobar lo mismo, que tu haces de manera tan sencilla. Saludos.

[@crushaten3001]

Espléndido. Muchísimas gracias por tu valioso vídeo, me sento de maravilla. Tu forma de explicar es excelente.

[@dimakavetskyy2082]

Me encantan tus tutoriales en español. Encima explicas genial.

[@lautaropastor4863]

Demasiado crack este tipo

[@Rtsen-tv]

wow excelente gracias por tus tutoriales una pregunta no puedes hacer el efecto con varios textos? que se escriba uno luego el otro de ese forma?

[@ronaldcauich200]

Amigo, tus videos me han salvado de varias dificultades que tenia, muchas gracias, sigue así.

[@martincamer2194]

Sos un pro pana,mucho más gente como vos qué enseña podrías ser alto profe crack!! Te quierooo!

[@joaquinast]

En hora buena, excelente canal, gracias por compartir, saludos y esperando sigas compartiendo con todos. gracias me has ayudado mucho

[@Jygproyectosweb]

+JA ST ¡Muchas gracias!

[@joaquinast]

eres un crack, podrias recomendarnos algunos tutoriales para complementar lo que compartes, algunas paginas o links de descarga de material. gracias saludos.

[@senchiroxD]

pense que seria algo compplicado :V y me voy sorprendido! grande maestro !

[@santre6855]

Me encanto el vídeo. Entré al vídeo por casualidad, pero me terminó encantando

[@xebario6089]

Sigue subiendo videos que tu estilo es el mejor de todos, y eso que he visto canales como falconmaster y platzi, en serio eres el mejor. Saludos de Venezuela!

[@milenam.v4114]

si continuas con esta temática tan práctica además de útil, seguramente llegarás a miles de subs más. Te recomendaré.

[@worchock]

Re genial tu vídeo

[@Conexion444]

Un grandee 2021 y funciona a la perfección

[@adrianaraqueg]

Te amo, bro

[@josefuentes7768]

Gracias por tu video, me ayudo con un tema que tenia que lograr!! Felicitaciones!!!

[@jonatanezequiel3764]

Muy bueno!! Gracias!

[@ARILENHOY]

Explicas bien y sencillo

[@pedroluissanchez6828]

muy interesante como todos tus videos, gracias

[@johnalexandermendozasanche1405]

Super like y suscrito, muchas gracias, me sirvió demasiado.

[@GuillermoSanchez-bt1dt]

Buen video amigo, solo una consulta si quiero agregar un párrafo que tendría que agregarle al código ya que solo afecta a una línea la animación. Gracias.

[@danielagustintoponi9286]

Excelente amigo, segui asi!

[@andresguaita9554]

Este video esta genial. Gracias por el contenido.

[@daniel29enrique]

Muy buenos videos, muchisimas gracias.

[@jackdimm4898]

Muy bueno!!

[@milaalfaro1407]

Excelente, me gusta como explicas :)

[@EnmaDev]

muy bien explicado! genio, muchas gracias

[@erismeirishidalgoreyes656]

Super, genial.

[@jorgeboldrini1380]

Hola, te felicito en verdad muy buenos tus videos, claros y concisos, y me gustaria que explicaras, perdon talvez ya lo tienes en algun otro video, las diferencias entre los display block, flex, table, etc y tambien para que sirve la etiqueta spam, fue creada especificamente para algo en especial o que. Desde ya gracias nuevamente por compartir tus conocimientos. Saludos desde Uruguay y vamo arriba a continuar.

[@Jygproyectosweb]

+Jorge Boldrini Hola Jorge, lo de flex aquí: kzbin.info/www/bejne/r3uVdqCNrap9i80 lo demás pues habría que hacer un video explicando el modelo de caja y ver lo de los display, estamos preparando un curso además de html. Gracias.

[@nihil_um]

+J&G Proyectos Web Hola, Jean Carlos. Eso del curso de html me interesa muchísimo y mira por donde, vais a tocarlo. Muchas gracias. Estaré atento, sin duda.

[@ramirovillenal.3329]

Consulta, que pasa si al borrar el texto y volver a escribir, se muestre otro texto. Cómo sería???

[@FukingPro]

Muy bueno!

[@albertosantiago3895]

muy bueno hermano Bendiciones!

[@carlospineda6381]

Llegue 4 años despues y me gusto el video , me sera de utilidad :3

[@ericksegura478]

Excelente gracias bro Dtb.

[@arielcastillo7925]

Sos un genio!!

[@miguelmallqui9472]

Excelente. Eres un capo... Gracias!

[@unitemplario]

Muy buen tutoríal y colicuaci

[@f-u-t-u-r-o-s-a-n-d-r-a]

Muchas gracias

[@leonardofabioacevedo2566]

excelente tu video, como se hace si es un párrafo para que salga línea a línea, gracias

[@holgeredudangulocastillo645]

Ese es un efecto muy bueno que le da brillo a nuestra página

[@migpagola]

Hola! de nuevo viendo tus videos, siempre tienes grandes ideas muy sencillas de realizar. Me encanta como explicas y tu carisma. Si quieres una idea podrias hacer como incorporar efectos de "swipe" con los dedos para divs etc.. en los websites y que se usen desde plataformas moviles, por ejemplo.

[@felipep9526]

muy buenos videos tienees, muchas gracias por toda tu forma de explicar :)

[@petoeslava6353]

Chingon!

[@coolbwunni]

Me encanta!!!

[@juandiegopolania1191]

juanca en el caso de que quiera que la animacion muestre el texto y en la segunda muestre otro texto, osea tener mas de una linea de texto, como seria crack?

[@wxzvictor7333]

Tengo una pregunta, no sé si se puede hacer sin js, podrías de alguna forma cuándo se borre el texto, que se escriba otro? que haga el efecto hasta donde sea, se borre y luego se escriba otra cosa

[@joseluisperez5137]

Tendrias que animar todo como aqui lo explica. Poner y luego quitar

[@tothemoon9290]

La cuestión seria .. como hacerlo sin el background color, porque yo quiero tener una imagen de fondo, si coloco una imagen el background color se ve mal

[@guannaor3011]

Una pregunta, como hago para que no se vea la barra negra que aparece cuando se escribe el texto?

[@alfredogonzalezgalicia9798]

Que ingenioso (Y)

[@Tokimoshi._]

amigooo si quiero hacer una canción ?? llega al limite el span como le amplio o alguien ?

[@adrianocelio5974]

Muito Obrigado , Ajudoume muito!

[@ibarvasquez]

Hola buenísimo concreto claro y sencillo. puedes comentarme su usas apache para tu 127.0.0.1? o el motor q uses?

[@Jygproyectosweb]

+Ibar Mario Uso Wamp, pero el 127.0.0.1 es de la vista previa de brackets, no estoy ejecutando ningún servidor en ese momento

[@ibarvasquez]

+J&G Proyectos Web muchas gracias, no lo conocía gracias a tu videotuto ya lo estoy descargando :) super!! gracias de nuevo y sigue adelante. :)

[@pablogomez8236]

muy bueno :)

[@nataliaandrealopezorozco1414]

Alguno lo hizo que le corre el span al réves ?? tapando las letras en vez de escribirlas ???

[@harlongraydelacruzcamayo7600]

Y que pasa si quiero poner una imagen en el background, aparace el color moviendose, una ayuda.

[@florenciamerzario8473]

excelente!!

[@mentewebs]

buen efecto, una duda como sería si tuviera que aparecer otra oracion?...exitos con tu canal. slds.

[@Jygproyectosweb]

+Wilfredo Tito Salazar con otra etiqueta, otro p con span

[@pabloantonio7148]

Qué humilde eres

[@mang5158]

crack ;)

[@unargentinoquepiensa7428]

amigo como hago esto pero con 2 frases diferentes??

[@albertosantiago3895]

hermano estoy usando ese efecto para un carrusel de imágenes pero tengo problemas en poner este efecto a funcionar puedes ayudarme que pasa???

[@PluberGalloquimbaya]

QUISIERA SABER COMO HAGO EFECTO DE MAQUINA DE ESCRIBIR EN UNA IMAGNE Y QUE LAS LETRAS SE VAYAN MOSTRANDO DE IZQUIERDA A DERECHA COMO SI APENAS SE FUERAN ESCRIBIENDO,PERO ENCIMA DE LA IMAGEN

[@201420131]

amigo bien, pero el problema es que no queda bien cuando se tiene como fondo un vídeo, o una imagen ya que se queda viendo el color del background el que usted coloco color tomato, alguna solución?

[@201420131]

***** El problema es que no queda el efecto de maquina de escribir, pues se queda viendo todo el texto.

[@Jygproyectosweb]

+𝔊𝓡𝔦𝔰𝔱𝔥𝔦𝔞𝔫 𝓡𝔢𝔤𝔦𝔬 𝔊𝔬𝔱𝔥𝔦𝔠𝔲𝔪 𝔓𝔞𝔤𝔞𝔫𝔲𝔰𝔞𝔫𝔲𝔰 𝔐𝔲𝔩𝔱𝔦𝔡𝔢𝔦 en el caso de una imagen o un video no se podría, porque como explique en el video el span que es del mismo color del body o del h1, cubre el texto, en el caso de una imagen no se puede, allí si habría que usar javascript

[@correooficial2022]

A mi no me funciona! Lo copie tal cual lo explicar, pero no corre. Aparece texto en pantalla pero sin el efecto

[@colommbiano]

no se que pasas pero los navegadores de hoy en dia no admiten animation ?

[@Jygproyectosweb]

todos lo admiten, ¿por qué dices que no?

[@ROBERTJUNIORSANTAMARIACAMPOS]

pero como hago si lo quiero poner sobre una imagen

[@ARILENHOY]

Si puedes enviar todo lo relacionado con animaciones te agradecería y enviame un número de teléfono o correo quiero plantearte algo gracias

[@osvaldocuellar4546]

saludos

[@anthonyisrael6971]

Excelente explicacion amigo, pero tengo un pequeño problema, no hay otra forma para que el texto igual tenga el mismo efecto pero que no necesite ajuro fondo, porque por ejemplo estoy creando una pagina y el background es una imagen, entonces el efecto no se ve bien porque sale esa raya color tomate

[@Jygproyectosweb]

+anthony israel Hola, este ejemplo no funciona con imágenes, solo con colores sólidos.

[@anthonyisrael6971]

J&G Proyectos Web habrá alguna forma que no sea con colores sólidos ?

[@Jygproyectosweb]

+anthony israel para este ejemplo no, habría que usar JavaScript

[@anthonyisrael6971]

J&G Proyectos Web ah ok amigo, tendrás algún vídeo dónde se pueda hacer dicho movimiento mediante el uso de javascript?

[@RodrigoGarciafynio]

brackets te debe una buena paga por promoverlo ajajajajaja ya lo estoy descargando jio jio y muy buenos tutos hermano

[@Jygproyectosweb]

+Rodrigo Garcia jajaja es verdad

[@SaulUrias]

hola, se que no tiene nada que ver con el vídeo pero me gustaría como centrar una imagen en CSS y que esta siempre este centrada desde cualquier dispositivo, gracias :D

[@cervatestorresulisesemmanu6066]

+Saul Urias para center la imagen una solucion puede ser utiliza margin: 0 auto; //Para que funcione le tendras que dar un ancho a la imagen Ahora para que la imagen se pueda ver desde cualquier dispositivo y no se salga de los margenes del navegador utiliza las meria queries. Espero esto te ayude

[@wordle_23]

+Saul Urias y que sea en porcentajes no en pixeles

[@robert3017]

En serio estaria padre que diseñaras un chat... como el de facebook.. que se abra y cierre... obio solamente la idea

[@lrmedia8416]

Hola. Y si lo que quiero es que con cada vez que vuelve a descubrir el texto se muestre un texto diferente?

[@lrmedia8416]

@LuK- Luc no, al final hice otra animación.

[@WalterCorrales95]

que pasa si quiero hacer ese efecto sobre una imagen que pasaria con el background del span??

[@Jygproyectosweb]

+Walter Corrales con una imagen de fondo no funciona, ahí si hay que usar JavaScript

[@sakudacastro]

Te funcionaría con una imagen de fondo si sobre ella pones el texto con un fondo del mismo color que el span.

[@rbtsolis]

¡Gracias! ¿Cómo pones las tabs en Brackets?

[@Jygproyectosweb]

+Roberth Solis Martínez kzbin.info/www/bejne/i5_Kd4iDndtlirsm29s

[@molins87]

como sería si tengo más de una línea de codigo dónde quiero aplicar el efect?

[@LiteraturaAC]

excelente, :)

[@andykunv9898]

Y si se hace a un texto largo con mas de 1 linea??

[@sakudacastro]

haz la prueba y ve cuanto se demora. Pero no creo que hayan problemas. Pero ahi si utilizaria un innerhtml para meterle frases al span y trabajar con el css.

[@delphstudio6108]

excelente video ,,, como podria realizar esto utilizando crelly slider en wp gracias

[@Jygproyectosweb]

Hola, no trabajamos con wordpress

[@ElMasterfa]

Y si necesito mltiples lineas se jodio el negocio

[@j.villasmil9575]

Y si el fondo es una imagen?

[@maxpwrgaming]

No me funcionó, aún así dejo mi like por la intención seguro me equivoqué en algo jaja Exitos!

[@aomine-5753]

no me funciona el efecto :'v y copie todo igual :c

[@Jygproyectosweb]

Hola, si hubieras copiado igual, te funcionaría.

[@aomine-5753]

para los que quieren hacer este efecto en un background que sea una imagen y puro css sin javascript les recominedo este video. kzbin.info/www/bejne/jGHPeqKlaJqFqMU

[@franklinbelenricse9264]

No me funciono :( :( lo e echo todo igual

[@eduardocd343]

no me salio y copie todo >;v

[@niclestani]

Es para una sola linea.. un bosta.

[@jeisonpodcast]

Consulta, que pasa si al borrar el texto y volver a escribir, se muestre otro texto. Cómo sería?