Geek Answers Handbook

Move text on a web page

I am creating a web page where I need to move text from the left side of the monitor screen to the right side of the screen. I tried with the <marquee> . It works without errors.

My requirement is that whenever the text disappears on the right side of the web page, it should start coming out on the left side of the page. He does not have to wait until all the text disappears, and then start on the left side.

So far, I have only done this with <html> . Also suggest other ways.

+7
source share
1 answer

Javascript is possible:

Make two copies of the scrollable text, separated by the width of the container. Animation (displayed on the left on the left) (displayed on the right on the right), then bounce back and repeat.

Something line by line (unchecked using jQuery):

 <div class="outer"> <div class="inner"> some text </div> </div>

CSS

 .outer, .inner { width: 100%; } .outer { position: relative; overflow: hidden; } .inner { position: absolute; }

JS:

 (function rerun(){ var time = 10000 //ms $(".inner").slice(0,-1).remove() $i1=$(".inner") $i2=$i1.clone() $i1.css({left:0}).animate({left:"-100%"}, time) $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun) })()

Thus, the text should begin on the right side as soon as it begins to disappear on the right side. Change the relative width to achieve a different effect.

+3
source

More articles:


All Articles