Cómo diseñar un timeline con CSS y jQuery

Los timelines son una auténtica tendencia de la web actual para visualizar los datos de manera interesante. Hoy vamos a charlar sobre cómo diseñar un timeline o línea del tiempo de una manera sencilla mediante un feed de datos en JSON, utilizando pseudo elementos de CSS como :before y :after. Los pseudo elementos se utilizan para aplicar efectos especiales a los selectores. Así que, todo claro, ¿no? ¡Vamos a ello!

El selector :before inserta contenido antes que el contenido del elemento(s) seleccionado.

Código CSS

 #updates
{
position:relative;
padding:20px 0px 20px 0px;
}
#updates:before
{
content: '';
position: absolute;
top: 0px;
bottom: 0px;
width: 5px;
background: #999999 ;
}

.timeline_square
{
width:12px;
height:12px;
display:block;
position: absolute;
left:-4px;
border-top:3px solid #e8eaed;
border-bottom:3px solid #e8eaed;
margin-top:-8px;
}

Diseño del estado del perfil

 <div class="stbody">
<span class="timeline_square color1"></span>
<div class="stimg"><img src="profile.jpg" /></div>
<div class="sttext">
<span class="stdelete" title="Delete">X</span>
<b>Srinivas Tamada</b><br/>
Programacion.net
<div class="sttime">10 seconds aga.</div>
<div class="stexpand">
//Youtube IFrame Code
</div>
</div></div>

users.json

Esto contiene el feed de datos de usuarios, el cual puedes generar utilizando código PHP.

{
"Messages":[
{
"user":"Srinivas",
"message":"Programacion en castellano programacion.net",
"avatar":"foto.jpg",
"embed":"",
"time":"16 seconds ago"
},
{
"user":"Arun",
"message":"Everything is possible. ",
"avatar":"arun.jpg",
"embed":"",
"time":"18 seconds ago"
},
{
"user":"Joker",
"message":"If you are good at something, never do it for free",
"avatar":"joker.png",
"embed":"<iframe height='315' src='//www.youtube.com/embed/FalHdi2DkEg' width='560'></iframe>",
"time":"28 seconds ago"
},
..............
..............
..............
]
}

index.html

Este archivo contendrá el código Javascript y jQuery. Aquí el $.getJSON parseará el objeto de datos JSON.

 <script src="js/jquery.min.js"></script>
<script src="js/jquery.linkify.min.js"></script>
<script src="js/jquery.livequery.js"></script>
<script>
$(document).ready(function()
{

//Formatting the text that contains URLs (text to link)
$(".sttext").livequery(function ()
{
$(this).linkify({ target: "_blank"});
});

//Parsing JSON object. 
$.getJSON("users.json", function(data)
{
var totalCount=5;
var jsondata='';
$.each(data.Messages, function(i, M)
{
//Generating random numbers for different dot colors 
var num = Math.ceil(Math.random() * totalCount );
jsondata +='<div class="stbody">'
                +'<span class="timeline_square color'+num+'"></span>'
                +'<div class="stimg"><img src="'+M.avatar+'" /></div>'
                +'<div class="sttext"><span class="stdelete">X</span>'
                +'<b>'+M.user +'</b><br/>'
                +M.message+'<div class="sttime">'+M.time
                +'</div><div class="stexpand">'+M.embed+'</div></div></div>';
});
$(jsondata).appendTo("#updates");
});

//Delete record
$('body').on("click",".stdelete",function()
{
var A=$(this).parent().parent();
A.addClass("effectHinge");
A.delay(500).fadeOut("slow",function(){
$(this).remove();
});
});


});
</script>
//HTML Code
<div id="updates"></div>

Código CSS

Colores aleatorios para los puntos del propio timeline.

.color1
{
background-color:#f37160
}
.color2
{
background-color:#50b848
}
.color3
{
background-color:#f39c12
}
.color4
{
background-color:#0073b7
}
.color5
{
background-color:#00acd6
}
.effectHinge
{
animation:hinge 1s;
-webkit-animation:hinge 1s; /* Safari and Chrome */
}