Last updated on February 14th, 2023 at 09:43 am
Scroll text inside div horizontal using Javascript. There is also option to pause the scroll (onMouseOver) and resume it (onMouseOut). Once scroll is complete it will automatically go up and restart scroll. It is a kind of infinite div text scroll. This is similar to simple marquee in HTML but if you prefer javascript for various reasons here you go.
You can control the scroll speed using scrollRate variable. Lower the number slower the scroll will be.
Javascript code
<script type="text/javascript">
var intX = window.screen.width - 10
var scrollRate = 20
function move(){
var objDiv = document.getElementById('id1');
if ( objDiv != null ) {
objDiv.style.left = (intX -= 3).toString() + 'px';
} //if
if ( intX < -90 )
{
intX = window.screen.width - 10;
ScrollInterval = setTimeout(move,scrollRate);
}
else
{ ScrollInterval = setTimeout(move,scrollRate); }
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
move()
}
</script>
Try to adjust this value if ( intX < -90 ) if you have bigger text. HTML code is as below
<body onload="move()">
<div id="id1" class="divclass" style="overflow:hidden;left:1100px; position:absolute; white-space:nowrap;" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()">Here is text that scrolls. Move your mouse over it to pause and resume :) </div>
<p><br><p><br><p><br><p><br>
admin
Keep up the fantastic piece of work, I read few posts on this internet site and I think that your web blog is really interesting and contains lots of superb information