Implement typewriter effects based on Css3 and JQuery _ javascript tips-js tutorial

Recently, I was working on a project where I needed to implement one character by one, which is similar to the typewriter effect. So I searched the internet for relevant information. Next, I will introduce in detail how to implement the typewriter Effect Based on Css3 and JQuery, you can refer to the following link for more information:

Recently, when I was working on a project, I needed to achieve the typing effect of one character one by one. I used css clip + css animations to achieve the effect of combining them with my own typewriter.

The results are very good.

Let's talk about this line first. We will see that it is actually a four-byte border with regular display and hiding, so here we will surely think of the after and before attributes,

For the time being, consider after.

Create a box first, and then after a border

 
 .box:before{ content: ''; position: absolute; width:px;height: px;border:px red solid; left:-px;top:-px; z-index: ; }

The next step is to make it display and hide it regularly. here we need to use the clip attribute. I have mentioned in this article: The implementation principle of the css circle percentage progress bar.

Let's talk about how to implement this. First, I want to display the upper border-left-bottom-right, so that there is a loop. Based on clip, rect (top, right, bottom,

Left). For example, if the upper border is displayed:

Clip: rect (px, px );

We only need to use animation to display it in sequence.

@-webkit-keyframes clipMe{%{ clip: rect(px, px, px, px); }%{ clip: rect(px, px, px, px); }%{ clip: rect(px, px, px, px); }%{ clip: rect(px, px, px, px); }%{ clip: rect(px, px, px, px); }}

After, the following code is called:

.box:after{-webkit-animation:clipMe s linear infinite;}

Of course, if we add the same before, it will be OK. Their time interval is s. Note that if you delay s, what you will see in s is an integer.

The border appears. here we need to change to delay-s, which will solve the problem perfectly.

.box:before{-webkit-animation:clipMe s -s linear infinite;}

/*************************************** ************************/
Let's talk about the typewriter. The typewriter is nothing more than replacing the display characters on the screen and getting the content in the box first,

/** Only for total entertainment, but not eggs **/
Login: Jmingzi
Password :******
Access is granted
Welcome ymblog.net!

After retrieval, replace the display one by one,

Var t = setInterval (function () {str = con. substr (, strlen) + "_" inclume.obj.html (str); // After the content is printed, if (strlen = con. length) {clearInterval (t);} strlen = strlen +;}, me. speed );

Here I only encapsulate it as a class to facilitate initialization of some parameters, complete code:

// Initialize the task, obtain several text segments, hide them, and display them one by one. $ (function () {function Type (obj, speed, welcome) {this. obj = obj; this. speed = speed; this. welcome = welcome;} Type. prototype = {init: function () {var str = this.obj.html({%this.obj.html (this. welcome); this. add (str) ;}, add: function (con) {var me = this; var str; var strlen =; var t = setInterval (function () {str = con. substr (, strlen) + "_" inclume.obj.html (str); // After the content is printed, if (strlen = con. length) {clearInterval (t);} strlen = strlen +;}, me. speed) ;}} var a = new Type ($ ('. box '),' initializing... ');. init ();});

The above is all the content of this article. I hope it will help you.