JMiur [E]

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>

8 comentarios:

Angel Luis Sanchez Iglesias  

Alucinado me he quedado. Increible tu página

Responder
Graciela  

Bailan la danza del vientre :)

Responder
Bonzu Pipinpadaloxicopolis III  

Un desastre JMiur, las fechas no sirven, algunos gadgets desaparecen y el formulario incrustado de comentarios no está‼

Responder
Bonzu Pipinpadaloxicopolis III  

ups, alguien me desactivó el javascript del navegador y es por eso mi espanto, yo no he dicho nada :$

Responder
Gem@  

A mi estos bailes me marean pero reconozco que le dan vidilla al blog :D

Responder
JMiur  

Son simpáticos ¿verdad? pero me pasa lo mismo, al cabo de un tiempo, marean :D

Responder
NickJP!^xD  

Amigo esto nomas es puro para blogs... o en verdad si sirve para paginas web?

Responder
JMiur  

Puede usarse en cualquier parte.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR