Auto Typing Text - *It's too slow*

HTML & CSS
1

I am trying to replicate a computer typing out a message. I would like to make it uniform but everytime i adjust my code the end result is less then satisfactory. By the time it makes its way down a few lines it becomes dreadfully slow. Suggestions? I am by all means not a professional coder and i am trying to learn as much as i can as i go but this one has me stumped for too long. Maybe there is a better way for me to do this?

Test Address: Test Page

2

It appears you are increasing the animation duration for each <p> so they will get progressively slower.

  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p:nth-child(3){
  animation: type2 12s steps(60, end);
}
        
p:nth-child(4){
  animation: type2 17s steps(60, end);
}
        
p:nth-child(5){
  animation: type2 26s steps(60, end);
}
        
p:nth-child(6){
  animation: type2 32s steps(60, end);
}
        
p:nth-child(7){
  animation: type2 40s steps(60, end);
}
        
p:nth-child(8){
  animation: type2 48s steps(60, end);
}

Try and make the durations the same and use a delay to make them follow one another.

3 Likes
3

Yes as Sam said keep the duration the same but delay the start of each one.

Something like this:

p {
	color: lime;
	font-family: "Courier";
	font-size: 12px;
	margin: 10px 0 0 10px;
	white-space: nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 4s steps(60, end);
}
p + p {width:0;	animation: type2 8s steps(60, end) forwards;}
p:nth-child(2) {animation-delay:0s}
p:nth-child(3) {animation-delay:2s;}
p:nth-child(4) {animation-delay:4s;}
p:nth-child(5) {animation-delay:6s;}
p:nth-child(6) {animation-delay:8s;}
p:nth-child(7) {animation-delay:10s;}
p:nth-child(8) {animation-delay:12s;}

Fiddle with the timings to match the speed and the length of text etc.

2 Likes
4

This scrolling method may be suitable for your site.

http://john-betong.tk/starwars

1 Like
5

You could probably manage without some of the vendor prefixes too, now, John.

1 Like
6

Would removing some of the vendor prefixes create problems with anyone using an old browser?

7

It all depends on how old is oldā€¦

1 Like
8

Yes, and hopefully goad them into updating their browser.
I think webkit is the only extension you may want to hang on to for animation currently.

3 Likes
9

If you use a monface font and set the length in ch units you can get a better effect but you have to know the character count beforehand.

1 Like
10

That only works for me in Chrome. FF and IE11 just give a blank screen.

11

Yes youā€™d have to hard code the ā€˜calcā€™ rule in the animation.

e.g. change calc(.1s * 19) to 1.9s

I was just too lazy to work it out :slight_smile:

3 Likes
12

@millikenjim88,

Late to the party and a bit off-topic, but I thought you might enjoy a different way of handling the Samsung monitor frame. The frame in this code hugs the edges of the userā€™s monitor at all widths. The thickness of the border-image does not change at different widths. The ā€œSamsungā€ logo is added separately so it does not resize at different widths.

I added some of your test content ā€œjust for funā€. Your animated control deck .gif is by far the heaviest thing in the ship.

Catch? Uses ā€œpointer-events:noneā€.

Slice and dice at will. :lol:

millikenjim88.zip (2.0 MB)

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.