FlipClock

HTML

<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<div class="clock"></div>
<div class="cntdown"></div>
<ul class="agenda-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

CSS

body {
    background-color: #ffffff;
}
body.blink-yellow {
    -webkit-animation: blinkyellow 4s linear;
    -moz-animation: blinkyellow 4s linear;
    animation: blinkyellow 4s linear; /* infinite */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes blinkyellow
{
0%  {background-color: rgba(255,255,0, 0.4); -webkit-ttransform: scale(1.05);}
24% {background-color: rgba(255,255,0, 0.0); -webkit-ttransform: scale(1);}

25% {background-color: rgba(255,170,0, 0.6); -webkit-ttransform: scale(1);}
49% {background-color: rgba(255,170,0, 0.2); -webkit-ttransform: scale(1);}

50% {background-color: rgba(255,85,0, 0.8); -webkit-ttransform: scale(1);}
74% {background-color: rgba(255,85,0, 0.4); -webkit-ttransform: scale(1);}

75% {background-color: rgba(255,0,0, 1); -webkit-ttransform: scale(1);}
100% {background-color: rgba(255,0,0, 0); -webkit-ttransform: scale(1);}
}

/* Standard syntax */
@keyframes blinkyellow
{
0%  {background-color: rgba(255,0,0, 0.2); -webkit-ttransform: scale(1.05);}
24% {background-color: rgba(255,0,0, 0); -webkit-ttransform: scale(1);}

25% {background-color: rgba(255,0,0, 0.4); -webkit-ttransform: scale(1);}
49% {background-color: rgba(255,0,0, 0); -webkit-ttransform: scale(1);}

50% {background-color: rgba(255,0,0, 0.7); -webkit-ttransform: scale(1);}
74% {background-color: rgba(255,0,0, 0); -webkit-ttransform: scale(1);}

75% {background-color: rgba(255,0,0, 1); -webkit-ttransform: scale(1);}
100% {background-color: rgba(255,0,0, 0); -webkit-ttransform: scale(1);}
}

/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper *, .agenda-items * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-clock-wrapper a,...

JavaScript

var clock, cntdown, cntAgenda, curAgenda;


(function($) {
	
	$(function() {
		/*
		clock  = $('.clock').FlipClock({
		    clockFace: 'TwentyFourHourClock',
            showSeconds: false
	    });
        */
        cntdown = $('.cntdown').FlipClock(10, {
            countdown: true,
            callbacks: {
                interval: function() {
                    var ts = cntdown.getTime().getSeconds();
                    if (ts==3) {
                        blinkAgenda(true);
                    } else if (ts>3) {
                        blinkAgenda(false);
                    }
                },
                start: function() {
                    // blinkAgenda(false);
                },
                stop: function() {
                    nextAgenda();
                    cntdown.setTime(15);
                    cntdown.start();
                }
            }
    	});
       
        curAgenda = 0;
        cntAgenda = $(".agenda-items li").length;
        $(".agenda-items li").each(function(i) {
            var d = $(this).text();
            d = '<a href="#"><div class="up"><div class="shadow"></div><div class="inn">'+d+'</div></div><div class="down"><div class="shadow"></div><div class="inn">'+d+'</div></div></a>';
            $(this).html(d);
        });

        function nextAgenda() {
            var n = ((curAgenda+1)<cntAgenda)? (curAgenda+1): 0;
            $(".agenda-items .flip-clock-active").removeClass("flip-clock-active");
            $(".agenda-items .flip-clock-before").removeClass("flip-clock-before");
            $(".agenda-items li:eq("+curAgenda+")").addClass("flip-clock-before");
            $(".agenda-items li:eq("+n+")").addClass("flip-clock-active");
            curAgenda = n;
        }
        
        function blinkAgenda(l) {
            if (l) {
                $("body").addClass("blink-yellow");
            } else {
                $("body").removeClass("blink-yellow")
            }
        }
	});
	
}(jQuery));