Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
08 Jan

Nice and Easy to Implement News Scrolling Tickers

  • License Free, Menu
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
How To Create A Scrolling Background Effect

How To Create A Scrolling Background Effect

How to Create an Infinite Carousel with jQuery

How to Create an Infinite Carousel with jQuery

ASP.Net Ajax Control Toolkit

ASP.Net Ajax Control Toolkit

A Slick & Compact News Previewer with jQuery

A Slick & Compact News Previewer with jQuery

How to Create Native-Feeling iOS Apps in Javascript

How to Create Native-Feeling iOS Apps in Javascript

A Collection of CSS3 List Scrolling Styles

A Collection of CSS3 List Scrolling Styles

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?

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Make FullScreen Page Transitions with CSS
  • Super Smooth CSS Transitions for jQuery
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework215
  • Hosting13
  • Information239
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA