jQuery Smooth Div Scroll by Thomas Kahn

Back to index

Scrolling Text


You know, I have one simple request.

And that is to have sharks with frickin' laser beams attached to their heads!

Now evidently, my cycloptic colleague informs me that that can't be done.

Can you remind me what I pay you people for?

Honestly, throw me a bone here. What do we have?


Scrolling text is just the same as scrolling images or other elements - almost. In order for Smooth Div Scroll to be able to calculate the width of the scrollable area, you need to set white-space: nowrap; in the CSS for the text elements inside the scrollable area.

Here's the CSS for the p-tags that I have put inside the scroller in this example:

#scrollingText div.scrollableArea p
	{
		display: block;
		float: left;
		margin: 0;
		padding: 0px 0px 20px 20px;
		font-family: Times, 'Times New Roman', Georgia, Serif; 
		font-size:75px; 
		font-weight: bold; 
		background-color: #fff; 
		color: #000; 
		white-space: nowrap;
	}

Another important thing to remember is that if you want the text to scroll in an endless loop (like in this example) you need to divide your text into at least two parts and each part must be at least as long as the scroller. If you don't do this, the function that handles the auto scrolling will not be able to swap elements around to give the illusion of endless scrolling. In the example on this page the text is divided into five separate paragraph tags.

Back to index