Last updated on February 16th, 2022 at 07:09 pm
Click to rate this tutorial!
[Total: 16 Average: 3.2]
Scroll text inside a div horizontal using Javascript
Scroll text inside div vertically 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.
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>
Click to rate this tutorial!
[Total: 16 Average: 3.2]
One reply on “How to scroll text using Javascript”
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