Scrolling News Ticker with Mootools

This tutorial will teach you how to implement a news ticker with horizontal scrolling using Mootools. As usual, Antonio Lupetti always explains it simple so you can easily implement and reuse this in your projects.

In the first step you'll see how the structure of each news is contained into a li element and ul list is contained into the layer "NewsHorizontal" with overflow property set to hidden and position set to relative. Then, just add a link to mootools framework in the head tag of your page.

The next step is to build the main HTML elements inside the body tag and to style the News Ticker with CSS code. Last step is adding JavaScript function to enable vertical scrolling provided from Capitol Media. The code can only be found by downloading the source code for this tutorial.

Take a look the details to create your own Mootools News Ticker. Modifying this, to fit your web project, should be fun!