WebAppers

/ best free open source web resources /

Shopify

Nice and Easy to Implement News Scrolling Tickers

Posted · Category: License Free, Menu

Would you like a scrolling ticker for your site? First of all look at Newsticker created by Bartelme. Since many web developers already use the Prototype JavaScript Framework, and he also wanted to use Scriptaculous for some nice animations for Newsticker. It transforms any given unordered list into a News Ticker. The news fade in and out and you can click on “x” to close it.

bartelme-newsticker.png

Gian Carlo Mingati has created a jQuery News Ticker called liScroll which is very easy to use. It transforms any given unordered list into a scrolling News Ticker automatically as well. If you want your list to scroll faster or slower than the default value, modify the travelocity param. The scrolling automatically pauses when you mouse over it. If you would like to pull your news items from a xml file, You should check out his xml-based newsticker with fade in and out effect and xml-based newsticker scrolling effect as well.

liscroll.png

Matt Berseth has created a CNN Style Scrolling Ticker with the Marquee Toolkit Control. It supports both left-to-right and right-to-left scrolling directions. You can easily apply a CSS class to the item when it is moused over. And also it support dynamically repopulating the marquee after it has finished scrolling.

marquee_control.png

Demo: Bartelme Newsticker
Demo: Gian Carlo Mingati liScroll
Demo: Gian Carlo Mingati xml-based newsticker with fade in and out effect
Demo: Gian Carlo Mingati xml-based newsticker with scrolling effect
Demo: Matt Berseth Scrolling Ticker with the Marquee Toolkit Control

6 Comments
  • http://www.runlevel6.org Gianni Chiappetta

    Ahhh I absolutely hate websites with scrolling tickers. They are a relic of mid ’90s webdesign, lets hope they don’t make a comeback!

  • http://www.XGhozt.com/ XGhozt

    I have to agree, they’re annoying. However, I admire this technique.

  • braker

    i thought we’d seen the last of
    may it burn in hell along with any false gods.

    surely a vertical fade in would of been more elegant?

  • Pingback: 3 marquesinas interactivas para anunciar las novedades de tu sitio - elWebmaster.com

  • Keith

    I’ve been studying XML, am not familiar with Ajax & was hoping to study such a working application as “Gian Carlo Mingati has created a jQuery News Ticker”. I believe I have the files in the same directory (not familiar with Ajax, wanted to get XNL apps figured out first).
    I would very much like to have the “xml-based newsticker with fade in and out effect” working to study from, but may be missing a file or some command. The html page will display, but not the text in the news ticker itself. When hovering over the news ticker, the first data item seems to be in there (minus the first part of the URI… the host website info… the C drive seems to be substituted instead).
    I’ve written the author just now, but would also be interested in other opinions. What exactly do you need to run this app correctly?

  • Mark

    Hello, i really like this article and have used the XML based fading one. Is there a way to concatenate the XML reference to where I can string multiple XML feeds into this one ticker?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons