Nube de etiquetas con jQuery

Esta es una forma de crear una nube de etiquetas animadas utilizando jQuery publicada por devirtuoso.com y que, tal vez, con algunos cambios, podría aplicarse incluso a las etiquetas de Blogger, cosa que quedará para quien quiera investigar el asunto.

El HTML no es otra cosa que una lista común:

<div id="listaE">
  <ul>
    <li><a href="url_etiqueta_1">etiqueta 1</a></li>
    <li><a href="url_etiqueta_2">etiqueta 2</a></li>
    <li><a href="url_etiqueta_3">etiqueta 3</a></li>
    <!-- continuamos agregando los distintos enlaces -->
  </ul>
</div>

Y el CSS básico:

<style>
  #listaE {
    display:none;
    overflow:hidden;
    position:relative;
    /* dimensionamos el contenedor y lo centramos */
    margin:0 auto;
    padding:20px 40px;
    height:500px;
    width:500px;
  }
  #listaE ul, #listaE li {
    /* eliminamos cualquier propiedad por defecto de la lista */
    list-style:none;
    margin:0;
    padding:0;
  }
  #listaE a {
    position:absolute;
    text-decoration: none;
    /* establecemos color y tipo de fuente del texto */
   color: #FFF;
  }
  #listaE a:hover {
    /* y del efecto hover sobre los enlaces */
    color:#FFF !important;
    opacity: 1 !important;
  }
</style>

Por último, el script en si mismo que ejecutamos cuando se termine de cargar la página:

<script>
$(document).ready(function(){
  var element = $('#listaE a');
  var offset = 0;
  var stepping = 0.03;
  var list = $('#listaE');
  var $list = $(list);
  $list.mousemove(function(e){
    var topOfList = $list.eq(0).offset().top;
    var listHeight = $list.height();
    stepping = (e.clientY ) /  listHeight * 0.2 - 0.1;
  });
  for (var i = element.length - 1; i >= 0; i--){
    element[i].elemAngle = i * Math.PI * 2 / element.length;
  }
  setInterval(render, 20);
  list.show();
  function render(){
    for (var i = element.length - 1; i >= 0; i--){
      var angle = element[i].elemAngle + offset;
      x = 120 + Math.sin(angle) * 30;
      y = 45 + Math.cos(angle) * 30;
      size = Math.round(20 - Math.sin(angle) * 20);
      var elementCenter = $(element[i]).width() / 2;
      var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px";
      $(element[i]).css("fontSize", size + "pt");
      $(element[i]).css("opacity",size/100);
      $(element[i]).css("zIndex" ,size);
      $(element[i]).css("left" ,leftValue);
      $(element[i]).css("top", y + "%");
    }
    offset += stepping;
  }
});
</script>

• animacion
• Blogger
• blogs
• CSS
• curiosidades
• Facebook
• Feedburner
• Firefox
• Google
• herramientas
• HTML
• iconos
• JavaScript
• JQuery
• json
• opiniones
• personal
• plantillas
• Scriptaculous
• servicios
• Twitter
• YouTube