Sweep-in News Scroller with Controls (no jQuery)

This demo has been replaced with a version that has 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

  • RWD CSS3 Blinds Effect Slideshow

    (1/10) 07th Aug 18 - A CSS3 slideshow with blinds effect (like the one in WOW Slider), powered by a few lines of JS. Stacked media queries serve smaller images to mobile.
  • Fast Log entries per page setting

    (2/10) 11th Jul 18 - You can now set a different number of logs per page in the front-end of the website than logs per page that are visible together in the admin panel.
  • Blog: AJAX & PHP 5-Star Rating

    (3/10) 16th May 18 - Read my latest entry in the blog; A 5-star rating system that saves votes to a text file, while AJAX displays average and total votes in real time.
  • Fast Cal 'copy event' feature added

    (4/10) 30th Apr 18 - Got an event that spans several days? Fast Cal's new "copy event" feature allows you to choose a range of dates to quickly duplicate an event to.
  • Old photos, trophies, and memories

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

    (6/10) 21st Mar 18 - Read my latest entry in the blog; Defer the loading of YouTube embeds until they're scrolled-to. Simple lazy-loading videos to make web pages load faster.
  • MySQL to MySQLi code rewrites

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

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

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

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

Sweep Left

  • RWD CSS3 Blinds Effect Slideshow

    (1/10) 07th Aug 18 - A CSS3 slideshow with blinds effect (like the one in WOW Slider), powered by a few lines of JS. Stacked media queries serve smaller images to mobile.
  • Fast Log entries per page setting

    (2/10) 11th Jul 18 - You can now set a different number of logs per page in the front-end of the website than logs per page that are visible together in the admin panel.
  • Blog: AJAX & PHP 5-Star Rating

    (3/10) 16th May 18 - Read my latest entry in the blog; A 5-star rating system that saves votes to a text file, while AJAX displays average and total votes in real time.
  • Fast Cal 'copy event' feature added

    (4/10) 30th Apr 18 - Got an event that spans several days? Fast Cal's new "copy event" feature allows you to choose a range of dates to quickly duplicate an event to.
  • Old photos, trophies, and memories

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

    (6/10) 21st Mar 18 - Read my latest entry in the blog; Defer the loading of YouTube embeds until they're scrolled-to. Simple lazy-loading videos to make web pages load faster.
  • MySQL to MySQLi code rewrites

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

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

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

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

Sweep Down

  • RWD CSS3 Blinds Effect Slideshow

    (1/10) 07th Aug 18 - A CSS3 slideshow with blinds effect (like the one in WOW Slider), powered by a few lines of JS. Stacked media queries serve smaller images to mobile.
  • Fast Log entries per page setting

    (2/10) 11th Jul 18 - You can now set a different number of logs per page in the front-end of the website than logs per page that are visible together in the admin panel.
  • Blog: AJAX & PHP 5-Star Rating

    (3/10) 16th May 18 - Read my latest entry in the blog; A 5-star rating system that saves votes to a text file, while AJAX displays average and total votes in real time.
  • Fast Cal 'copy event' feature added

    (4/10) 30th Apr 18 - Got an event that spans several days? Fast Cal's new "copy event" feature allows you to choose a range of dates to quickly duplicate an event to.
  • Old photos, trophies, and memories

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

    (6/10) 21st Mar 18 - Read my latest entry in the blog; Defer the loading of YouTube embeds until they're scrolled-to. Simple lazy-loading videos to make web pages load faster.
  • MySQL to MySQLi code rewrites

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

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

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

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

Fade In

  • RWD CSS3 Blinds Effect Slideshow

    (1/10) 07th Aug 18 - A CSS3 slideshow with blinds effect (like the one in WOW Slider), powered by a few lines of JS. Stacked media queries serve smaller images to mobile.
  • Fast Log entries per page setting

    (2/10) 11th Jul 18 - You can now set a different number of logs per page in the front-end of the website than logs per page that are visible together in the admin panel.
  • Blog: AJAX & PHP 5-Star Rating

    (3/10) 16th May 18 - Read my latest entry in the blog; A 5-star rating system that saves votes to a text file, while AJAX displays average and total votes in real time.
  • Fast Cal 'copy event' feature added

    (4/10) 30th Apr 18 - Got an event that spans several days? Fast Cal's new "copy event" feature allows you to choose a range of dates to quickly duplicate an event to.
  • Old photos, trophies, and memories

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

    (6/10) 21st Mar 18 - Read my latest entry in the blog; Defer the loading of YouTube embeds until they're scrolled-to. Simple lazy-loading videos to make web pages load faster.
  • MySQL to MySQLi code rewrites

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

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

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

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

Related

More demos and snippets

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