_javascript skills of typewriter effect based on CSS3 and jquery

First of all, we enclose the effect chart:

Recently do the project need to achieve a single character of the typing effect, with the clip+css of CSS animation, with their own writing the effect of the typewriter combined, the whole

Together, the effect is very good.

To say this line first, we will see that it is a bar, in fact, is a four-week border regular display of hidden, then here must think of the After,before attribute,

We'll consider after.

First create a box, then after a border

 <div class= "box" ></div>
 box:before{
 content: ';
 Position:absolute;
 WIDTH:PX;HEIGHT:PX;BORDER:PX Red Solid;
 left:-px;top:-px;
 Z-index:;
 }

The next thing to do is to let it have a regular display hidden on it, here to use the clip attribute, I this article has mentioned: CSS Circular percent progress bar implementation principle.

So here's how we do this, first I want to show the top border-left-bottom-right, so there's a loop. According to Clip,rect (upper, right, bottom,

left), such as showing the top border, then it is:

Clip:rect (PX,PX,PX,PX);

We just need to use animation to show it in turn, OK.

@-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);}

And then after the call to display:

. box:after{
-WEBKIT-ANIMATION:CLIPME s linear infinite;

Of course, we add an identical before to OK, their time interval is s, here to note that if you are delaying s, then you will see in S is the whole

Border appears, the problem will be solved perfectly by delaying-s instead.

. box:before{
-WEBKIT-ANIMATION:CLIPME s-s linear infinite;

/***************************************************************/
To speak of typewriters, the typewriter is simply to replace the display characters on the screen, to get the contents of the box first,

<div class= "box" >
<span>/** only Entertainment, and then egg **/</span>
<p>Login:Jmingzi</p>
<p>password: ******</p>
<p>access is granted</p>
<span>welcome ymblog.net! </span>
</div>

To replace the display after the acquisition,

var t = setinterval (function () {
str = CON.SUBSTR (, strlen) + "_";
Me.obj.html (str);
Content is printed out
if (strlen = = con.length) {
clearinterval (t);
}
strlen = strlen +;
}, Me.speed);

Here I just encapsulate it as a class that makes it easy to initialize some of the parameters, complete code:

Initialize the work, get a few paragraphs of text, hide them, and display them individually
$ (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) + "_";
Me.obj.html (str);
Content is printed out
if (strlen = = con.length) {
clearinterval (t);
}
strlen = strlen +;
}, Me.speed);
}
var a = new Type ($ ('. Box '), ' initializing ... ');
A.init ();
});

The above is the entire content of this article, I hope to help you