If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Beverleyh

Simple Sweep-in News Scroller (CSS3/JS)

I've recently been working on digital signage displays for a school (scheduled web pages displayed on 42" TV screens) so I thought I'd write a short blog post to show you the mechanics of how their news and updates are presented on the screens. It uses CSS3 animation for visual effects and a small JavaScript function to time the slides.

Behind the scenes, the news displayed on the digital signage is managed with my free software, Fast Feed, so if you'd like to explore that option, head over there to grab a copy. It outputs the news entries in RSS v2.0 XML format, or HTML. I used a combination of both for the actual project (one of the news boxes was an external BBC feed), but the demo takes the HTML format;

Additional CSS for how each message is revealed can be tagged on individually - here's the CSS for news that sweeps in from the bottom and sweeps out at the top. The .sweep-up class is also used in the JS function later on;

Timing and slide reveal is handled with a JavaScript function that sequentially adds (and removes) a class to each list item. Note that you should match the animation duration in the CSS above with the timing parameter in the JS function below - both are 8 seconds in the demo. The basic script is something I've used a few times before, but because I want to use multiple news boxes on a single page, I turned it in to a function;

// Params:
// CSS selector of list items - uses the id in the ul tag
// Class used to apply the CSS3 animation
// How long to show each slide in milliseconds
addClassInSequence('#newsscroller-sweep-up > li', 'sweep-up', 8000);

Head over to the demo page to see the working example. I've included 4 versions of the News Scroller, each with a different visual effect;

Sweep Up

Sweep Left

Sweep Down

Fade In

But play around with the keyframe animations to change the way the messages present themselves. Come up with your own animations or check out Animate.css for inspiration.