Sweep-in News Scroller with Controls (no jQuery)

This demo supersedes the earlier version that didn't have CSS animation support for the stock Android browser.

A light-weight news scroller where each new message sweeps in, while the previous message sweeps away and fades out. Interactive controls are powered with plain JavaScript (no dependancies).

Works in modern browsers and IE8+ (no sweep or fade in IE8/9).

Please view the source of this page for HTML markup, CSS and JS.

Sweep Up

  • Fast Warn WYSIWYG editor update

    (1/10) 09th Jan 18 - Fast Warn has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Hacked Joomla! website woes

    (2/10) 02nd Jan 18 - The first day back after Christmas, and I'm dealing with a hacked Joomla! website. Is this what people mean when they talk about a "New Year detox"?
  • Santa's sleigh got an upgrade

    (3/10) 04th Dec 17 - Last year's Christmas story (with Santa sleigh progress bar) got a big upgrade. In fact, the whole page was revamped with festive animations galore!
  • Blog: Defer imgs until scrolled-to

    (4/10) 07th Nov 17 - Defer the loading of images until they're scrolled into the viewport. Here's a simple lazy-loading image script to make web pages load much faster.
  • Scroll wide tables automatically

    (5/10) 05th Oct 17 - Are wide tables breaking your web page layouts, particularly on mobile? Wrap a scrolling container around them automatically with this JS function.
  • Responsive DHFS VLE launched

    (6/10) 04th Sep 17 - Over the summer, I've been working on a new Virtual Learning Environment for Dronfield Henry Fanshawe School. All ready to go for the new school term!
  • Blog: Convert anchors to spans

    (7/10) 21st Aug 17 - Read my latest entry in the blog; Remove the rogue href generated by LinkAdv's id field in Moodle's Atto editor, and convert anchors to spans.
  • HMS Testimonials updated

    (8/10) 07th Aug 17 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • Fast Logs WYSIWYG editor upgrade

    (9/10) 20th Jul 17 - Fast Logs has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Fast Feed WYSIWYG editor upgrade

    (10/10) 29th Jun 17 - Fast Feed has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.

Sweep Left

  • Fast Warn WYSIWYG editor update

    (1/10) 09th Jan 18 - Fast Warn has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Hacked Joomla! website woes

    (2/10) 02nd Jan 18 - The first day back after Christmas, and I'm dealing with a hacked Joomla! website. Is this what people mean when they talk about a "New Year detox"?
  • Santa's sleigh got an upgrade

    (3/10) 04th Dec 17 - Last year's Christmas story (with Santa sleigh progress bar) got a big upgrade. In fact, the whole page was revamped with festive animations galore!
  • Blog: Defer imgs until scrolled-to

    (4/10) 07th Nov 17 - Defer the loading of images until they're scrolled into the viewport. Here's a simple lazy-loading image script to make web pages load much faster.
  • Scroll wide tables automatically

    (5/10) 05th Oct 17 - Are wide tables breaking your web page layouts, particularly on mobile? Wrap a scrolling container around them automatically with this JS function.
  • Responsive DHFS VLE launched

    (6/10) 04th Sep 17 - Over the summer, I've been working on a new Virtual Learning Environment for Dronfield Henry Fanshawe School. All ready to go for the new school term!
  • Blog: Convert anchors to spans

    (7/10) 21st Aug 17 - Read my latest entry in the blog; Remove the rogue href generated by LinkAdv's id field in Moodle's Atto editor, and convert anchors to spans.
  • HMS Testimonials updated

    (8/10) 07th Aug 17 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • Fast Logs WYSIWYG editor upgrade

    (9/10) 20th Jul 17 - Fast Logs has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Fast Feed WYSIWYG editor upgrade

    (10/10) 29th Jun 17 - Fast Feed has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.

Sweep Down

  • Fast Warn WYSIWYG editor update

    (1/10) 09th Jan 18 - Fast Warn has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Hacked Joomla! website woes

    (2/10) 02nd Jan 18 - The first day back after Christmas, and I'm dealing with a hacked Joomla! website. Is this what people mean when they talk about a "New Year detox"?
  • Santa's sleigh got an upgrade

    (3/10) 04th Dec 17 - Last year's Christmas story (with Santa sleigh progress bar) got a big upgrade. In fact, the whole page was revamped with festive animations galore!
  • Blog: Defer imgs until scrolled-to

    (4/10) 07th Nov 17 - Defer the loading of images until they're scrolled into the viewport. Here's a simple lazy-loading image script to make web pages load much faster.
  • Scroll wide tables automatically

    (5/10) 05th Oct 17 - Are wide tables breaking your web page layouts, particularly on mobile? Wrap a scrolling container around them automatically with this JS function.
  • Responsive DHFS VLE launched

    (6/10) 04th Sep 17 - Over the summer, I've been working on a new Virtual Learning Environment for Dronfield Henry Fanshawe School. All ready to go for the new school term!
  • Blog: Convert anchors to spans

    (7/10) 21st Aug 17 - Read my latest entry in the blog; Remove the rogue href generated by LinkAdv's id field in Moodle's Atto editor, and convert anchors to spans.
  • HMS Testimonials updated

    (8/10) 07th Aug 17 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • Fast Logs WYSIWYG editor upgrade

    (9/10) 20th Jul 17 - Fast Logs has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Fast Feed WYSIWYG editor upgrade

    (10/10) 29th Jun 17 - Fast Feed has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.

Fade In

  • Fast Warn WYSIWYG editor update

    (1/10) 09th Jan 18 - Fast Warn has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Hacked Joomla! website woes

    (2/10) 02nd Jan 18 - The first day back after Christmas, and I'm dealing with a hacked Joomla! website. Is this what people mean when they talk about a "New Year detox"?
  • Santa's sleigh got an upgrade

    (3/10) 04th Dec 17 - Last year's Christmas story (with Santa sleigh progress bar) got a big upgrade. In fact, the whole page was revamped with festive animations galore!
  • Blog: Defer imgs until scrolled-to

    (4/10) 07th Nov 17 - Defer the loading of images until they're scrolled into the viewport. Here's a simple lazy-loading image script to make web pages load much faster.
  • Scroll wide tables automatically

    (5/10) 05th Oct 17 - Are wide tables breaking your web page layouts, particularly on mobile? Wrap a scrolling container around them automatically with this JS function.
  • Responsive DHFS VLE launched

    (6/10) 04th Sep 17 - Over the summer, I've been working on a new Virtual Learning Environment for Dronfield Henry Fanshawe School. All ready to go for the new school term!
  • Blog: Convert anchors to spans

    (7/10) 21st Aug 17 - Read my latest entry in the blog; Remove the rogue href generated by LinkAdv's id field in Moodle's Atto editor, and convert anchors to spans.
  • HMS Testimonials updated

    (8/10) 07th Aug 17 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • Fast Logs WYSIWYG editor upgrade

    (9/10) 20th Jul 17 - Fast Logs has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.
  • Fast Feed WYSIWYG editor upgrade

    (10/10) 29th Jun 17 - Fast Feed has been updated with the latest version of TinyMCE 3.x (v3.5.12). Grab a copy to benefit from browser compatibility fixes in the entry editor.

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.