1

I wanted to implement a typewriter effect in CSS and I found this great article in CSS Tricks

I was tinkering around with it and wanted to see if I can implement what would be on a hero image, shown here in Codepen

However, you can see that the blinking goes all the way to the end.

Is there way to fix, or this unavoidable, since the display it's set to table-cell?

Alejandro
  • 2,266
  • 6
  • 35
  • 63
  • I think this is a better way to do achieve a typewriter effect: https://stackoverflow.com/a/57887588/2397550 – Mr. Hugo Sep 12 '19 at 09:09

2 Answers2

3

You can try that. Remove fixed width from intro container and give this into description. And for centering you can add margin: 0 auto into intro.

#intro{
  display: table;
  height: 100vh;
  margin: 0 auto;
  .intro-description{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
  }
}

Codepen: http://codepen.io/anon/pen/WGydqj

hieroshima
  • 242
  • 2
  • 8
1

The closest I got was by changing your typing keyframe. 

@keyframes typing {
 from { width: 0 }
 51%{border-right:transparent;}
 100%{border-right:transparent;}
 to { width: 100% }
}

You can hide the cursor from going all the way off but I'm not sure it looks quite right because it takes awhile for the bink/cursor to reappear at the end of the sentence. There are also some responsive issues with this because smaller screen sizes the blinking will disappear too early, the opposite problem... If this solution works for you but you still need it resposive, then you'll need make multiple keyframes and apply them through mq...

That being said, this is really cool. I didn't know you could do a pure css typing effect. I thought the only way to do this was with heavy DOM manipulation like they use in typeWriter.js which may still be a viable solution for you as well if the pure css trick doesn't work out.

HansDev
  • 70
  • 10