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

  • Fast Cal admin search added

    (1/10) 12th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Cal's admin panel to help users more easily find entries for editing.
  • Fast Feed admin search added

    (2/10) 06th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Feed's admin panel to help users more easily find entries for editing.
  • RWD CSS3 Blinds Effect Slideshow

    (3/10) 28th Nov 18 - I revisited my CSS3 slideshow with blinds effect (like the one in WOW Slider), to make a version using the img element instead of background-images.
  • Pop-up Text Message with Effects

    (4/10) 19th Nov 18 - A responsive, modal text popup in semi-transparent overlay, with zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations.
  • Fast Cal multiple bug fixes release

    (5/10) 24th Oct 18 - A number of fixes have been made to Fast Cal; Placeholder text now removed, tabindex fixes, and corrected internal/ external domain recognition for URLs.
  • Blog: Log and block email spam IPs

    (6/10) 29th Aug 18 - Read my latest entry in the blog; Using PHP to log spammer IPs in order to block them from further attacks on the mail server with .htaccess.
  • HMS Testimonials updated

    (7/10) 17th Aug 18 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • RWD CSS3 Blinds Effect Slideshow

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

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

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

Sweep Left

  • Fast Cal admin search added

    (1/10) 12th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Cal's admin panel to help users more easily find entries for editing.
  • Fast Feed admin search added

    (2/10) 06th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Feed's admin panel to help users more easily find entries for editing.
  • RWD CSS3 Blinds Effect Slideshow

    (3/10) 28th Nov 18 - I revisited my CSS3 slideshow with blinds effect (like the one in WOW Slider), to make a version using the img element instead of background-images.
  • Pop-up Text Message with Effects

    (4/10) 19th Nov 18 - A responsive, modal text popup in semi-transparent overlay, with zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations.
  • Fast Cal multiple bug fixes release

    (5/10) 24th Oct 18 - A number of fixes have been made to Fast Cal; Placeholder text now removed, tabindex fixes, and corrected internal/ external domain recognition for URLs.
  • Blog: Log and block email spam IPs

    (6/10) 29th Aug 18 - Read my latest entry in the blog; Using PHP to log spammer IPs in order to block them from further attacks on the mail server with .htaccess.
  • HMS Testimonials updated

    (7/10) 17th Aug 18 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • RWD CSS3 Blinds Effect Slideshow

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

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

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

Sweep Down

  • Fast Cal admin search added

    (1/10) 12th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Cal's admin panel to help users more easily find entries for editing.
  • Fast Feed admin search added

    (2/10) 06th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Feed's admin panel to help users more easily find entries for editing.
  • RWD CSS3 Blinds Effect Slideshow

    (3/10) 28th Nov 18 - I revisited my CSS3 slideshow with blinds effect (like the one in WOW Slider), to make a version using the img element instead of background-images.
  • Pop-up Text Message with Effects

    (4/10) 19th Nov 18 - A responsive, modal text popup in semi-transparent overlay, with zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations.
  • Fast Cal multiple bug fixes release

    (5/10) 24th Oct 18 - A number of fixes have been made to Fast Cal; Placeholder text now removed, tabindex fixes, and corrected internal/ external domain recognition for URLs.
  • Blog: Log and block email spam IPs

    (6/10) 29th Aug 18 - Read my latest entry in the blog; Using PHP to log spammer IPs in order to block them from further attacks on the mail server with .htaccess.
  • HMS Testimonials updated

    (7/10) 17th Aug 18 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • RWD CSS3 Blinds Effect Slideshow

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

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

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

Fade In

  • Fast Cal admin search added

    (1/10) 12th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Cal's admin panel to help users more easily find entries for editing.
  • Fast Feed admin search added

    (2/10) 06th Dec 18 - A new search feature (scanning titles and descriptions) has been added to Fast Feed's admin panel to help users more easily find entries for editing.
  • RWD CSS3 Blinds Effect Slideshow

    (3/10) 28th Nov 18 - I revisited my CSS3 slideshow with blinds effect (like the one in WOW Slider), to make a version using the img element instead of background-images.
  • Pop-up Text Message with Effects

    (4/10) 19th Nov 18 - A responsive, modal text popup in semi-transparent overlay, with zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations.
  • Fast Cal multiple bug fixes release

    (5/10) 24th Oct 18 - A number of fixes have been made to Fast Cal; Placeholder text now removed, tabindex fixes, and corrected internal/ external domain recognition for URLs.
  • Blog: Log and block email spam IPs

    (6/10) 29th Aug 18 - Read my latest entry in the blog; Using PHP to log spammer IPs in order to block them from further attacks on the mail server with .htaccess.
  • HMS Testimonials updated

    (7/10) 17th Aug 18 - It looks like business is booming (or should that be "blooming"?) for HMS Garden Design. Customer testimonals received, and content duly updated.
  • RWD CSS3 Blinds Effect Slideshow

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

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

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

Related

More demos and snippets

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