Blog (my web musings)

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;

Simple Sweep-in News Scroller:

Demo

Compatibility

Works in all browsers, but IE8/9 users don't get the sweep and fade effect.

HTML markup

The simplified markup looks like this - you can see that its just an unordered list. The unique id will be used in the JS function later;

<ul id="newsscroller-sweep-up" class="newsscroller">
    <li>News Entry 1</li>
    <li>News Entry 2</li>
    <li>News Entry 3</li>
</ul>

Core CSS

Core CSS for the News Scroller is this;

.newsscroller, .newsscroller * { box-sizing:border-box }
.newsscroller { position:relative; list-style-type:none; overflow:hidden; border:1px solid #ccc; max-width:35em; min-height:20em } /* change to suit */
.newsscroller li { position:absolute; height:100%; opacity:0 }

Additional CSS

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;

/* #### - sweep-up css - #### */
.newsscroller .sweep-up { z-index:1; -webkit-animation:sweepUp 8s both; animation:sweepUp 8s both }
@-webkit-keyframes sweepUp { 
    0% { opacity:0; -webkit-transform:translate3d(0,100%,0) } 
    15% { opacity:1; -webkit-transform:none } 
    80% { opacity:1; -webkit-transform:none } 
    100% { opacity:0; -webkit-transform:translate3d(0,-200%,0) } 
    }
@keyframes sweepUp { 
    0% { opacity:0; transform:translate3d(0,100%,0) } 
    15% { opacity:1; transform:none } 
    80% { opacity:1; transform:none } 
    100% { opacity:0; transform:translate3d(0,-200%,0) } 
    }

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;

function addClassInSequence(qselector, aniclass, time) { 
    var item = document.querySelectorAll(qselector); 
    item[0].className = aniclass; 
    function sequence(i){ 
       item[i].className = ''; 
       if(i == item.length -1){ item[0].className = aniclass; i = -1; } 
       if(i > -1){ item[i+1].className = aniclass;} 
       setTimeout(function(){ sequence(++i % item.length) }, time); 
       } 
    setTimeout(function(){ sequence(0) }, time); 
    }

And to initialise the script, it is called like this;

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

View the source of the demo to get the full CSS:

Demo