RefreshNews

emulate refresh news

by bsorrentino

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.woff"></script>
<div class="news">
<div id="flip" class="flip">
    <div id="card" class="card">  
 <div id="icon" class="face front" >    
  <i class="fa fa-cog fa-spin fa-lg gear-icon"></i>
 </div>
 <div id="count" class="face back" >    
     <div  class="lastnews-count" >13</div>
     <div class="label">news</div>  
 </div>    
 </div></div>    
    
</div>

CSS

.news {
    width: 28px;
    text-align:center;
    background-color: #1691b3;
    color: #fff;
}

.flip {
  height: 22px;
  position: relative;  
  -webkit-perspective: 800;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 3;
}
.flip .card .front {
    position: absolute;
    z-index: 2;
}
.flip .card .back {
  -webkit-transform: rotatey(-180deg);
    z-index: 1;
}

.gear-icon {
    margin: 0 auto;
    vertical-align:middle;
    line-height:22px;
}
.lastnews-count {  
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'FuturaStdBook', sans-serif
    height:11px;
    vertical-align: middle;
    line-height:13px;
}

.label {
    font-size: 9px; 
    _font-weight:bold;
    font-family:arial;
}

JavaScript

setInterval( function() {
    document.getElementById("card").className += " flipped";

    setTimeout( function() {
        var c = document.getElementById("card").className.slice(0,-8);
        document.getElementById("card").className = c;
    }, 3000);
}, 6000);