Drawing Attention to Changes

An idea to alert a use that something is different by fading out the non-updated items and applying an effect to the updated item.

HTML

<div class="container">
   <div class="content"></div>
      <div class="blocker"></div>
</div>

CSS

.container {
   position: relative;
}

.container:before, .container:after {
   content: " ";
   display: table;
}

.container:after {
   clear: both;
}

.content {
   position: relative;
   float: left;
   background-color: #FFFFFF;
   border: 1px solid;
   margin: 10px;
   padding: 5px 10px;
   width: 250px;
   transition: transform 400ms;
   -moz-transition: transform 400ms;
   -webkit-transition: transform 400ms;
}

.blocker {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
   opacity: 0.7;
   transition: opacity 400ms;
   -moz-transition: opacity 400ms;
   -webkit-transition: opacity 400ms;
}

.standout {
   z-index: 10;
}

.in {
   display: block;
}

.out {
   opacity: 0;
}

@keyframes shake{
   0% { transform: translate(3px, 0) rotate(2deg); }
   50% { transform: translate(-3px, 0) rotate(-2deg); }
   100% { transform: translate(0, 0) rotate(0deg); }
}

@-moz-keyframes shake{
   0% { -moz-transform: translate(3px, 0) rotate(2deg); }
   50% { -moz-transform: translate(-3px, 0) rotate(-2deg); }
   100% { -moz-transform: translate(0, 0) rotate(0deg); }
}

@-webkit-keyframes shake {
   0% { -webkit-transform: translate(3px, 0) rotate(2deg); }
   50% { -webkit-transform: translate(-3px, 0) rotate(-2deg); }
   100% { -webkit-transform: translate(0, 0) rotate(0deg); }
}

.shake {
   animation-name: shake;
   animation-duration: 150ms;
   animation-iteration-count: 5;
   animation-timing-function: linear;

   -moz-animation-name: shake;
   -moz-animation-duration: 150ms;
   -moz-animation-iteration-count: 5;
   -moz-animation-timing-function: linear;

   -webkit-animation-name: shake;
   -webkit-animation-duration: 150ms;
   -webkit-animation-iteration-count: 5;
   -webkit-animation-timing-function: linear;
}

.bigger {
   transform: scale(1.1);
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
}

JavaScript

var words = [
   'Pharmacy',
   'Nursing'
]
var timer = [],
    effect = 'shake';

$( '.container' )
   .children( '.content' ).html( '<div>'+words[0]+'</div><div>Now</div>' )
      .each(function( z ) {

            var $el = $( this );

            timer[z] = {
               $time: $el.children().last(),
               last: new Date()
            };

         });

setInterval(function() {

   var i = Math.floor( Math.random() * 10 % 8 ),
       j = Math.floor( Math.random() * 10 % 5 );

   $( '.container' )
      .children().eq( i ).addClass( 'standout ' + effect )
         .children().first().html( words[j] );

   $( '.blocker' ).addClass( 'in' );

   timer[i].last = new Date();

   setTimeout(function() {
      $( '.blocker' ).addClass( 'out' );

      $( '.container' )
         .children()
               .eq( i ).removeClass( 'standout ' + effect );

      setTimeout(function() {
         $( '.blocker' ).removeClass( 'in out' );
      }, 400);

   }, 800);
}, 2600);

// Update the since-last-updated timer
setInterval(function() {
      var now = new Date();

      $.each( timer, function() { this.$time.html( Math.round((now - this.last) / 10000) + 's ago' ); });
}, 10000);