JS Text Lifting Effect

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.