Barra animada para compartir con jQuery y CSS

Las redes sociales pueden marcar una gran diferencia en la popularidad de un blog. Los sitios que se comunican mejor y entienden las redes sociales suelen ser los más populares.

Un paso hacia este objetivo sería encontrar una manera de alentar a sus visitantes a compartir su contenido en las redes en las que son más activos.

Hoy estamos haciendo exactamente eso, utilizando JavaScript puro con el marco jQuery, para crear una barra animada para compartir, que permitirá a los visitantes de su sitio web compartir publicaciones en varias redes sociales.

Continúe y descargue los archivos de demostración y continúe con el paso uno de este tutorial.

Paso 1 - XHTML

Como de costumbre, comenzamos con el marcado XHTML. El área de uso compartido se construye mediante el uso de tres contenedores div principales:

  • #compartir - este elemento actúa como un contenedor que contiene los otros dos. También tiene aplicadas algunas propiedades CSS3, como esquinas redondeadas;
  • #etapa - aquí es donde tiene lugar la animación. En la carga de la página, jQuery detecta los centros horizontales y verticales y los usa para colocar los divs giratorios. También flota hacia la izquierda;
  • #share-label - esto tiene la imagen de "compartir el amor" como fondo. También flota hacia la izquierda y, por lo tanto, se coloca justo al lado del #escenario. div.

Pero echemos un vistazo detallado:

demostración.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 id="share-label">
<!-- This is where the share some love image appears -->
</div>

</div>

El código anterior es todo lo que necesita agregar a su página (además de los archivos js y css), para que pueda mostrar la barra animada debajo de sus artículos.

Cada botón tiene un btn genérico clase y uno individual (digg, tweetmeme, etc). Esto hace posible reunir las reglas comunes compartidas por los botones en una sola clase y facilitar la personalización en un momento posterior.

También observe que dentro de cada uno de los divs del botón, hay un archivo JavaScript individual que realmente genera el botón en la página. Los proporcionan las redes sociales y, por lo general, muestran el botón exactamente donde se inserta la etiqueta del script.

Ahora veamos cómo se diseñan estos elementos.

Paso 2:CSS

He dividido el código CSS en dos partes.

demo.css - Parte 1

#share{
    /* The share box container */
    width:500px;
    background:#ececec;
    height:220px;
    margin:60px auto;
    overflow:hidden;

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

#share-label{
    /* The image on the right */
    background:url(img/share.png) no-repeat 50% 50%;
    float:left;
    height:220px;
    width:200px;
}

#stage{
    /* This is where the animation takes place */
    position:relative;

    border-right:1px solid #DDDDDD;
    width:290px;
    height:220px;
    background:white;
    float:left;

    border-bottom-left-radius:12px;
    border-top-left-radius:12px;

    -moz-border-radius-bottomleft:12px;
    -moz-border-radius-topleft:12px;

    -webkit-border-bottom-left-radius:12px;
    -webkit-border-top-left-radius:12px;
}

.btn{
    /* This class is assigned to every share button */
    background-color:white;
    height:90px;
    left:0;
    top:0;
    width:60px;
    position:relative;
    margin:20px 0 0 10px;
    float:left;
}

.bcontent{
    /* Positioned inside the .btn container */
    position:absolute;
    top:auto;
    bottom:20px;
    left:0;
}

Tal vez en esta etapa se esté preguntando cómo se animan los botones reales en un movimiento circular en la página.

Una parte importante de la técnica tiene lugar dentro del #escenario Clase CSS anterior. El escenario en sí está relativamente posicionado, lo que permite que los botones (que tienen un posicionamiento absoluto asignado por jQuery a continuación y son descendientes directos) se posicionen en consecuencia.

Esto significa que configurar top y left a cero en los botones los coloca en la esquina superior izquierda del escenario.

Verás el resto de la técnica en el paso 3.

demo.css - Parte 2

/* Individual rules for every share button */

.digg{  background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{    background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{  background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}

.thanksto{
    position:absolute;
    bottom:2px;
    right:4px;
    font-size:10px;
}

.thanksto a,.thanksto a:visited{
    color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
    display:block;
}

span.fb_share_count_top.fb_share_no_count {
    line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
    display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
    background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
    display:block;
}

En la segunda parte de la hoja de estilo, asignamos reglas individuales a cada botón que definen una imagen de fondo única con el reflejo. Después de esto, personalizamos el botón de Facebook, para que su estilo coincida con el resto de los botones.

Con esto podemos continuar con el paso 3.

Paso 3:jQuery

Con la velocidad con la que los navegadores modernos procesan JavaScript, se vuelve más fácil crear animaciones llamativas, antes reservadas solo para tecnologías como Adobe Flash.

Pero antes de ponernos manos a la obra, debemos incluir dos archivos de script en el encabezado de nuestra página:

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

La primera incluye la biblioteca jQuery de la CDN de Google y la segunda línea incluye nuestro propio script.js. archivo, cubierto en detalle a continuación:

secuencia de comandos.js

$(document).ready(function(){

    /* This code is run on page load */

    var deg=0;
    var dif=-3;

    /* Assigning the buttons to a variable for speed: */
    var arr = $('.btn');

    /* Caching the length of the array in a vаriable: */
    var len = arr.length;

    /* Finding the centers of the animation container: */
    var centerX = $('#stage').width()/2 - 40;
    var centerY = $('#stage').height()/2 - 60;

    /* Applying relative positioning to the buttons: */
    arr.css('position','absolute');

    /* The function inside the interval is run 25 times per second */
    setInterval(function(){

        /* This forms an area with no activity on mouse move in the middle of the stage */
        if(Math.abs(dif)<0.5) return false;

        /* Increment the angle: */
        deg+=dif;

        /* Loop through all the buttons: */
        $.each(arr,function(i){

            /* Calculate the sine and cosine with the new angle */
            var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
            var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);

            /* Setting the css properties */
            $(this).css({
                top:centerY+25*eSin,
                left:centerX+90*eCos,
                opacity:0.8+eSin*0.2,
                zIndex:Math.round(80+eSin*20)
            });
        })
    },40);

    /* Detecting the movements of the mouse and speeding up or reversing the rotation accordingly: */
    var over=false;
    $("#stage").mousemove(function(e){

        if(!this.leftOffset)
        {
            /* This if section is only run the first time the function is executed. */
            this.leftOffset = $(this).offset().left;
            this.width = $(this).width();
        }

        /* If the mouse is over a button, set dif to 0, which halts the animation */
        if(over) dif=0;
        else
            dif = -5+(10*((e.pageX-this.leftOffset)/this.width));

        /* In the other case calculate the speed according to the X position of the mouse */
    });

    /* Detecting whether the mouse is positioned above a share button: */
    $(".bcontent").hover(
        function(){over=true;dif=0;},
        function(){over=false;}
    );
});

La idea principal aquí es que usamos setInterval para configurar una función que se ejecutará cada 40 milisegundos. Esto significa que se ejecuta 25 veces por segundo, o si lo comparas con una pantalla de cine, son 25 fotogramas por segundo. En otras palabras, más que suficiente para mostrar una animación suave (siempre que la velocidad de renderizado del navegador sea lo suficientemente rápida y que no haya otras secuencias de comandos que interfieran).

Como no se trata de una animación que requiere muchos cálculos, se ejecuta sin problemas en todas las versiones de navegador (incluso en versiones tan antiguas como IE6). ). Sin embargo, la animación más fluida que he observado está en Safari y Cromo (funcionaría bien en Firefox también, siempre que no tenga muchos complementos o pestañas abiertas).

Puede ver a lo largo del código anterior, que tiendo a asignar los resultados de los selectores de jQuery u otras funciones a las variables. Esto se hace para mejorar la velocidad de la secuencia de comandos; de lo contrario, todas esas funciones y métodos se calcularían en cada cuadro (para un total de 25 veces por segundo), lo que finalmente reduciría el rendimiento y la fluidez de la animación.

¡Con esto, nuestra barra animada para compartir está completa!

Conclusión

En este tutorial, creamos una barra animada para compartir en redes sociales que alienta a los visitantes a compartir artículos en varias redes sociales con una animación llamativa.

Para incluir nuevos servicios, además de los cinco actualmente activos, solo tienes que incluir un nuevo btn en el div del escenario con un script apropiado que generaría el botón.

¿Qué opinas? ¿Cómo mejorarías este guión?