This script will automatically scroll the contents of a page element (usually a div). It can scroll vertically like the closing credits of a movie, or horizontally like a train zooming by. It requires the popular jQuery library.
Features
- More than one scrolling element can appear on a page, and they scroll independently. If one box changes direction, the rest continue scrolling in the directoin they were already going
- Scrolling speed is adjustable
- When a scrolling element reaches the bottom, it can start over from the beginning again or scroll back in the other direction
- If the user puts the mouse pointer over the scrolling element (to click on a link, for example), it stops scrolling
- BSD license allowing personal and commercial use free of charge
Check out the vertical scrolling demo or the horizontal scrolling demo.
Requirements
jQuery Headline Scroll requires jQuery 1.2.1 or higher. It may work with earlier versions, but it has only been tested with 1.2.1. It should work fine with later versions as long as the jQuery Team (thanks, guys!) don’t change their code too radically.
You will need to include the jQuery script in your page before you include jQuery Headline Scroll, like this:
<script src="jquery-1.2.1.js">
<script src="jqueryheadlinescroll-2.0.js" >
Usage
To make an element on your page autoscroll, you just need to give it the class “autoscroll” and set the element’s height to something smaller than the size of your content.
<div class="autoscroll" style="height: 100px;">
Think it’s scrolling by too slowly? There are two global Javascript variables you can adjust to control the scrolling:
<script>
// How often to scroll, in milliseconds
scrollerIntervalMs = 200;
// Number of pixels to scroll every interval (defaults to 1 if not specified)
scrollerStep = 1;
</script>
Want it to scroll back the other way once it reaches the end? Add class “reversingscroll”!
<div class="autoscroll reversingscroll" style="height: 100px;">
Want it to scroll horizontally instead of vertically? Make one of its classes “horizontalscroll”.
<div class="autoscroll horizontalscroll" style="height: 100px;">
When scrolling is paused, the class “paused” is added to the scrolling element. This is how the script keeps track of which boxes are scrolling and which ones aren’t. You can take advantage of this “feature” to apply styles to a box that’s paused. See the demos for how I make scrollbars appear when the mouse is over a scrolling element.
<style>
.paused {
background-color: black;
color: white;
}
</style>
Donations
A lot of open source projects have a tip jar. I really enjoy donating money to projects I use — I’ll probably never meet the programmers in real life, so it’s not like I can buy them a beer or something. An online donation is the next best thing.
If you found this script useful, wont you please consider donating to one of the following instead of directly to me?:
Downloads
Version 2.0 (February 11, 2009)
jQuery Headline Scroll 2.0 (5kb)
jQuery Headline Scroll 2.0 (minified) (2kb)
Version 1.0 (December 8, 2007)
jQuery Headline Scroll 1.0 (3kb)
jQuery Headline Scroll 1.0 (min) (1021 bytes)
December 8th, 2007 at 1:57 pm
[...] but required two other libraries as well. So, I started over from scratch this weekend and put jQuery Headline Scroll [...]
January 25th, 2009 at 11:57 am
Really great stuff!
February 9th, 2009 at 2:01 am
how can cause the scroll to continue without stopping?
February 11th, 2009 at 10:09 pm
[...] it’s been over a year since I wrote the jQuery Headline Scroll script, and it continues to be the most popular page here at csixty4.com. I wonder how many sites [...]
April 28th, 2009 at 2:50 pm
hi,
cant get the js file on this page. Any idea ?
April 28th, 2009 at 3:06 pm
I was cleaning out some old projects and must have deleted these files by mistake. Good thing I have backups!
April 28th, 2009 at 3:47 pm
damn, not really what i’m looking for in the end. Thanks anyway.