logo

Patrocine Flip Wall con jQuery y CSS

Diseñar y codificar una página de patrocinadores es parte de la vida del desarrollador (al menos de la vida del afortunado desarrollador, si se trata de un sitio personal suyo). Sin embargo, sigue reglas diferentes a las de las otras páginas del sitio. Tienes que encontrar la manera de encajar mucha información y organizarla de forma clara, de modo que el énfasis se ponga en tus patrocinadores y no en otros elementos de tu diseño.

Estamos usando PHP, CSS y jQuery con el complemento jQuery Flip, para hacer precisamente eso. El código resultante también se puede utilizar para mostrar a sus patrocinadores, clientes o proyectos de cartera.

Paso 1 - XHTML

PHP genera la mayor parte del marcado para cada uno de los patrocinadores después de recorrer el $sponsor principal. formación. A continuación puede ver el código que se generaría y generaría para Google:

demo.php

<div title="Click to flip" class="sponsor">
    <div class="sponsorFlip">
        <img alt="More about google" src="img/sponsors/google.png">
    </div>

    <div class="sponsorData">
        <div class="sponsorDescription">
            The company that redefined web search.
        </div>
        <div class="sponsorURL">
            <a href="http://www.google.com/">http://www.google.com/ </a>
        </div>
    </div>
</div>

El .sponsor más externo div contiene dos elementos div adicionales. El primero - sponsorFlip - contiene el logotipo de la empresa. Cada clic en este elemento hace que se inicie el efecto Flip, como verá en la parte jQuery del tutorial.

Quizás más interesante es el sponsorData división Está oculto a la vista con una pantalla:ninguna regla CSS, pero es accesible para jQuery. De esta forma podemos pasar la descripción y la URL de la empresa patrocinadora al front-end. Una vez que se completa la animación de volteo, el contenido de este div se inserta dinámicamente en sponsorFlip .

Paso 2:CSS

Podemos comenzar estableciendo el estilo del muro, ya que sin él no se usa mucho la página. El código se divide en dos partes. Algunas clases se omiten para mayor claridad. Puedes ver todos los estilos usados ​​por la demostración en styles.css en el archivo de descarga.

estilos.css - Parte 1

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;
}

.sponsor{
    width:180px;
    height:180px;
    float:left;
    margin:4px;

    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
    background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}

Después de diseñar el patrocinador y sponsorFlip divs, agregamos un :hover estado para este último. Estamos usando CSS3 insertado box-shadow para imitar el efecto de sombra interior con el que puede estar familiarizado en Photoshop. En el momento de escribir, las sombras insertadas solo funcionan en las últimas versiones de Firefox, Opera y Chrome, pero al ser principalmente una mejora visual, sin ella, la página sigue siendo perfectamente utilizable en todos los navegadores.

estilos.css - Parte 2

.sponsorFlip img{
    /* Centering the logo image in the middle of the .sponsorFlip div */

    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
}

.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;
}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

Como se mencionó anteriormente, los sponsorData div no está destinado a la visualización, por lo que está oculto con display:none . Su propósito es almacenar solo los datos que luego jQuery extrae y muestra al final de la animación.

Paso 3 - PHP

Tiene muchas opciones para almacenar los datos de sus patrocinadores:en una base de datos MySQL, un documento XML o incluso un archivo de texto sin formato. Todos estos tienen sus beneficios y los hemos usado todos en los tutoriales anteriores (excepto el almacenamiento XML, nota personal).

Sin embargo, los datos del patrocinador no son algo que cambie a menudo. Por eso es necesario un enfoque diferente. Para los propósitos de la tarea en cuestión, estamos utilizando una matriz multidimensional con toda la información del patrocinador dentro. Es fácil de actualizar y aún más fácil de implementar:

demo.php - Parte 1

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
    array('facebook','The biggest social..','http://www.facebook.com/'),
    array('adobe','The leading software de..','http://www.adobe.com/'),
    array('microsoft','One of the top software c..','http://www.microsoft.com/'),
    array('sony','A global multibillion electronics..','http://www.sony.com/'),
    array('dell','One of the biggest computer develo..','http://www.dell.com/'),
    array('ebay','The biggest online auction and..','http://www.ebay.com/'),
    array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
    array('google','The company that redefined w..','http://www.google.com/'),
    array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
    array('mysql','The most popular open source dat..','http://www.mysql.com/'),
    array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
    array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
    array('cisco','The biggest networking and co..','http://www.cisco.com/'),
    array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
    array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

Los patrocinadores se agrupan en los principales $sponsors formación. Cada entrada de patrocinador se organiza como una matriz regular separada. El primer elemento de esa matriz es la clave única del patrocinador, que corresponde al nombre de archivo del logotipo. El segundo elemento es una descripción del patrocinador y el último es un enlace al sitio web del patrocinador.

Después de definir la matriz, usamos el shuffle() integrado Función de PHP para aleatorizar el orden en que se muestran los patrocinadores.

demo.php - Parte 2

// Looping through the array:

foreach($sponsors as $company)
{
    echo'
        <div class="sponsor" title="Click to flip">
            <div class="sponsorFlip">
                <img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
            </div>

            <div class="sponsorData">
                <div class="sponsorDescription">
                    '.$company[1].'
                </div>
                <div class="sponsorURL">
                    <a href="'.$company[2].'">'.$company[2].'</a>
                </div>
            </div>
        </div>

    ';
}

El código anterior se puede encontrar en la mitad de demo.php . Básicamente recorre los $sponsors barajados array y genera el marcado que discutimos en el paso uno. Observe cómo los diferentes elementos de la matriz se insertan en la plantilla.

Paso 4:jQuery

El complemento jQuery Flip requiere tanto el jQuery biblioteca y jQuery UI . Entonces, después de incluirlos en la página, podemos continuar con la escritura del código que dará vida a nuestro muro de patrocinadores.

secuencia de comandos.js

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

Primero vinculamos una función como oyente para el evento de clic en .sponsorFlip divs. Después de que ocurre un evento de clic, verificamos si volteó la bandera se establece a través de jquery data() método. Esta bandera se establece individualmente para cada sponsorFlip div y nos ayuda a determinar si el div ya se ha invertido. Si es así, usamos revertFlip() método definido por el complemento Flip. Devuelve el div a su estado anterior.

Sin embargo, si la bandera no está presente, iniciamos un giro en el elemento. Como se mencionó anteriormente, .sponsorData div, que está contenido en cada div de patrocinador, contiene la descripción y la URL del patrocinador, y está oculto a la vista con CSS. Antes de que comience la inversión, el complemento ejecuta onBefore función que definimos en el objeto de configuración que se pasa como parámetro (línea 29). En él cambiamos el contenido del sponsorFlip div al de sponsorData div, que reemplaza la imagen del logotipo con información sobre el patrocinador.

¡Con esto nuestro patrocinador flip wall está completo!

Conclusión

Hoy usamos el complemento jQuery Flip para construir un muro patrocinador para su sitio. Puede usar este ejemplo para traer interactividad a las páginas de su sitio. Y como los datos del muro se leen desde una matriz, puede modificarlos fácilmente para que funcionen con cualquier tipo de base de datos o almacenamiento.

¿Qué opinas? ¿Cómo modificarías este código?