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

  • Old photos, trophies, and memories

    (1/10) 12th Apr 18 - Been sorting old b/w photos, diaries, and registers, to build a new Alumni area. Ex-students include Def Leppard's drummer and England football captain!
  • Blog: Defer videos until scrolled-to

    (2/10) 21st Mar 18 - Defer the loading of YouTube embeds until they're scrolled into the viewport. Here's a simple lazy-loading video script to make web pages load much faster.
  • MySQL to MySQLi code rewrites

    (3/10) 05th Mar 18 - During the snowy weather, I've been making long-overdue MySQLi code updates to some old database systems, ready for an anticipated PHP upgrade.
  • Tab support for Multi-Level Menus

    (4/10) 13th Feb 18 - All Responsive Multi-Level Menus have been updated with keyboard 'tab-to' support to improve accessibility; Drop-Down, Fly-Out, Push/ Slide.
  • Blog: 'Tab-to' multi-level menus

    (5/10) 01st Feb 18 - Read my latest entry in the blog; Don't lose :focus! This script adds keyboard 'tab-to' support to CSS-only multi-level menus, for improved accessibility.
  • Pixlr online image editor training

    (6/10) 24th Jan 18 - Spent the afternoon in an image editing training session with Ashgate Croft School. Pixlr editor makes a fab training tool for folks deciding to buy Photoshop.
  • Fast Warn WYSIWYG editor update

    (7/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

    (8/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

    (9/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

    (10/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.

Sweep Left

  • Old photos, trophies, and memories

    (1/10) 12th Apr 18 - Been sorting old b/w photos, diaries, and registers, to build a new Alumni area. Ex-students include Def Leppard's drummer and England football captain!
  • Blog: Defer videos until scrolled-to

    (2/10) 21st Mar 18 - Defer the loading of YouTube embeds until they're scrolled into the viewport. Here's a simple lazy-loading video script to make web pages load much faster.
  • MySQL to MySQLi code rewrites

    (3/10) 05th Mar 18 - During the snowy weather, I've been making long-overdue MySQLi code updates to some old database systems, ready for an anticipated PHP upgrade.
  • Tab support for Multi-Level Menus

    (4/10) 13th Feb 18 - All Responsive Multi-Level Menus have been updated with keyboard 'tab-to' support to improve accessibility; Drop-Down, Fly-Out, Push/ Slide.
  • Blog: 'Tab-to' multi-level menus

    (5/10) 01st Feb 18 - Read my latest entry in the blog; Don't lose :focus! This script adds keyboard 'tab-to' support to CSS-only multi-level menus, for improved accessibility.
  • Pixlr online image editor training

    (6/10) 24th Jan 18 - Spent the afternoon in an image editing training session with Ashgate Croft School. Pixlr editor makes a fab training tool for folks deciding to buy Photoshop.
  • Fast Warn WYSIWYG editor update

    (7/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

    (8/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

    (9/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

    (10/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.

Sweep Down

  • Old photos, trophies, and memories

    (1/10) 12th Apr 18 - Been sorting old b/w photos, diaries, and registers, to build a new Alumni area. Ex-students include Def Leppard's drummer and England football captain!
  • Blog: Defer videos until scrolled-to

    (2/10) 21st Mar 18 - Defer the loading of YouTube embeds until they're scrolled into the viewport. Here's a simple lazy-loading video script to make web pages load much faster.
  • MySQL to MySQLi code rewrites

    (3/10) 05th Mar 18 - During the snowy weather, I've been making long-overdue MySQLi code updates to some old database systems, ready for an anticipated PHP upgrade.
  • Tab support for Multi-Level Menus

    (4/10) 13th Feb 18 - All Responsive Multi-Level Menus have been updated with keyboard 'tab-to' support to improve accessibility; Drop-Down, Fly-Out, Push/ Slide.
  • Blog: 'Tab-to' multi-level menus

    (5/10) 01st Feb 18 - Read my latest entry in the blog; Don't lose :focus! This script adds keyboard 'tab-to' support to CSS-only multi-level menus, for improved accessibility.
  • Pixlr online image editor training

    (6/10) 24th Jan 18 - Spent the afternoon in an image editing training session with Ashgate Croft School. Pixlr editor makes a fab training tool for folks deciding to buy Photoshop.
  • Fast Warn WYSIWYG editor update

    (7/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

    (8/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

    (9/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

    (10/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.

Fade In

  • Old photos, trophies, and memories

    (1/10) 12th Apr 18 - Been sorting old b/w photos, diaries, and registers, to build a new Alumni area. Ex-students include Def Leppard's drummer and England football captain!
  • Blog: Defer videos until scrolled-to

    (2/10) 21st Mar 18 - Defer the loading of YouTube embeds until they're scrolled into the viewport. Here's a simple lazy-loading video script to make web pages load much faster.
  • MySQL to MySQLi code rewrites

    (3/10) 05th Mar 18 - During the snowy weather, I've been making long-overdue MySQLi code updates to some old database systems, ready for an anticipated PHP upgrade.
  • Tab support for Multi-Level Menus

    (4/10) 13th Feb 18 - All Responsive Multi-Level Menus have been updated with keyboard 'tab-to' support to improve accessibility; Drop-Down, Fly-Out, Push/ Slide.
  • Blog: 'Tab-to' multi-level menus

    (5/10) 01st Feb 18 - Read my latest entry in the blog; Don't lose :focus! This script adds keyboard 'tab-to' support to CSS-only multi-level menus, for improved accessibility.
  • Pixlr online image editor training

    (6/10) 24th Jan 18 - Spent the afternoon in an image editing training session with Ashgate Croft School. Pixlr editor makes a fab training tool for folks deciding to buy Photoshop.
  • Fast Warn WYSIWYG editor update

    (7/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

    (8/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

    (9/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

    (10/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.

Related

More demos and snippets

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