Menu
I am designing web page where I need to move text from left side of monitor screen to right side of screen. I have tried with <marquee> tag. It is working without any error.
My requirement is whenever text is about to disappear inside right side of web page it should start coming out from left side of page. It should not wait for all text to disappear and then start from left side.
Till now I have been doing it using <html> only. Please suggest other ways also.
718
Create HTMLCreate a <div> with a class name "circle" inside the <body>. Place a number inside that <div>.
The <marquee> tag in HTML is used to create scrolling text or image in a webpages. It scrolls either from horizontally left to right or right to left, or vertically top to bottom or bottom to top.
CSS Code: In this section, CSS properties are used to create Text Animation. @keyframes are used which defines the code for animation. The animation is created by gradually changing from one set of CSS styles to another.
It is possible using Javascript:
Have two copies of the text being scrolled separated by the width of the container. Animate from (left copy visible) to (right copy visible), then jump back and repeat.
Something along the lines of (untested, 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)
})()
This way the text should start appearing on the right side as soon as it starts disappearing on the right side. Modify the relative widths to achieve a different effect.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
