Redes sociales animadas con JQuery

Animated Share Buttons es una idea de tutorialzine.com para colocar botones o enviar entradas a diferentes redes sociales de un modo diferente, usando animaciones.

Para eso, requiere del uso de la librería jQuery que debemos tener cargada antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

Luego, agregaremos el script de la animación, cosa que podemos hacer descargando el ZIP con el demo y alojando el archivo script.js en un servidor:

<script type="text/javascript" src="URL_script.js"></script>

o bien, copiar su contenido y pegarlo directamente en la plantilla:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  var deg=0;
  var dif=-3;
  var arr = $('.btn');
  var len = arr.length;
  var centerX = $('#stage').width()/2 - 40;
  var centerY = $('#stage').height()/2 - 60;
  arr.css('position','absolute');
  setInterval(function(){
    if(Math.abs(dif)<0.5) return false;
    deg+=dif;
    $.each(arr,function(i){
      var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
      var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);
      $(this).css({
        top:centerY+25*eSin,
        left:centerX+90*eCos,
        opacity:0.8+eSin*0.2,
        zIndex:Math.round(80+eSin*20)
      });
    })
  },40);
  var over=false;
  $("#stage").mousemove(function(e){
    if(!this.leftOffset) {
      this.leftOffset = $(this).offset().left;
      this.width = $(this).width();
    }
    if(over) dif=0;
    else
    dif = -5+(10*((e.pageX-this.leftOffset)/this.width));
  });
  $(".bcontent").hover(
    function(){over=true;dif=0;},
    function(){over=false;}
  );
});
//]]>
</script>

Y por último, el CSS donde deberemos colocar las imágenes a ser mostradas. Este es el ejemplo modificado levemente de la página original:

<style type="text/css">
#share {
  -moz-border-radius: 10px;
  background: #FFF;
  height: 220px;
  margin: 20px auto;
  overflow: hidden;
  width: 270px;
}
#stage {
  height: 220px;
  position: relative;
  width: 270px;
}
.btn {
  background-color: #FFF;
  float: left;
  height: 90px;
  left: 0;
  margin: 20px 0 0 10px;
  position: relative;
  top: 0;
  width: 60px;
}
.bcontent {
  bottom: 20px;
  left: 0;
  position: absolute;
  top: auto;
}

/* y las imágenes de los servicios a agregar */
.digg {background:url(imagenDIGG.png) no-repeat -4px bottom;}
.reddit {background:url(imagenREDDIT.png) no-repeat -4px bottom;}
.facebook {background:url(imagenFACEBOOK.png) no-repeat bottom center;}
.tweetmeme {background:url(imagenTWITTER.png) no-repeat -5px bottom;}
.dzone {background:url(imagenDZONE.png) no-repeat -7px bottom;}
</style>

Con eso agregado, podemos usarlo, por ejemplo, en un elemento HTML:

<div id="share">
  <div id="stage">
    <div class="btn digg">
      <div class="bcontent">
        <a class="DiggThisButton"></a>
        <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
      </div>
    </div>
    <div class="btn tweetmeme">
      <div class="bcontent">
        <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
      </div>
    </div>
    <div class="btn dzone">
      <div class="bcontent">
        <script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>
      </div>
    </div>
    <div class="btn reddit">
      <div class="bcontent">
        <script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
      </div>
    </div>
    <div class="btn facebook">
      <div class="bcontent">
        <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
      </div>
    </div>
  </div>
</div>

Con cualquier servicio será relativamente igual, cada botón deberá esta en una estructura como esta:

<div class="btn miServicio">
  <div class="bcontent">
    ....... y aquí colocarlemos el enlace o script de ese servicio .......
  </div>
</div>