JS Text Lifting Effect

In fact, this effect with CSS3 animation can do, but here is familiar with the operation of JS!

As follows:

HTML section:

<Divclass= "box">    <DivID= "Shengjiang">        <P><spanColor= "#ff0">Line of text</span></P>    </Div></Div>

. box this layer of div can not be added, this is just as the parent element of the father of the son! Of course, the browser as a parent element is also possible, just want to set up in other div in trouble.

CSS section:

*{margin:0;padding:0;}. Box{position:relative;margin:100px;Border:1px solid #ccc;width:200px;Height:500px; }#shengjiang{position:Absolute;Color:#000; }

If it is CSS3, just replace it with the following.

*{margin:0;padding:0;}. Box{position:relative;margin:100px;Border:1px solid #ccc;width:200px;Height:500px; }#shengjiang{position:Absolute;Color:#000;Animation:Mymove 5s Infinite; }@keyframes Mymove{0% {Top:0px;}50%{Top:200px;}100%{Top:0px;}            }

Animated properties of ANIMATION,CSS3

The name of the Mymove definition, which can be customized.

5s Time required

Infinite cyclic repetition

@keyframes Mymove Add an animated property to the name defined above.

That is, 0% when the position, 50% when the location, 100% when the location.

0-100% can be arbitrarily separated from each other.

Top is from 0 to 200px and back to 0;

JS part, although to here has reached the effect of said ...

    varStep = 4; functionAnim (x, y) {//x is the apex and y is the bottomdocument.all["Shengjiang"].style.top=x+ "px";//Initial top position            if(x>=y) {step=-4;//a negative value is reached at the bottom, and the value indicates that the moving pixel is reduced by 4 pixels when the settimeout is executed, and the larger the value, the greater the distance to move. It also appears faster each time it is called.             }            if(x<0) {//0 of this line represents a relative height to the display window (parent of the child's absolute parent)Step = 4;//If the specified height is reached, the value is positive, that is, the increased parameter moves down} setTimeout (' Anim (' + (x+step) + ', ' +y+ ') ', 35);//wait a few seconds to execute, so the smaller the number the faster the faster            //} anim (5,200);//5 is only the initial position, 200 is the overall height, as to how to confirm the top, but also see if (x<0) {step = 4;} The value of 0 in the x<0. 

JS Text Lifting Effect