logo

Hacer una exhibición de productos impresionante con CSS3

Una página de producto es cualquier página de su sitio web que muestra un producto. Tiene que describir sus características, dar algunas capturas de pantalla y ser descriptivo. Naturalmente, este es el lugar donde construyes el interés del visitante hacia tu producto, pero cada vez es más difícil ser original para captar su atención. Afortunadamente, una nueva biblioteca de JavaScript compacta puede ayudarlo a destacar.

impress.js es una pequeña biblioteca independiente que facilita el diseño de presentaciones CSS3 avanzadas con efectos llamativos. Pero, ¿y si usáramos impress.js para algo más que una presentación? Esto es lo que estamos haciendo hoy:¡daremos vida a una página de producto simple y antigua con un poco de magia CSS3!

El HTML

Comenzamos con un documento HTML5 simple que será la columna vertebral del ejemplo de hoy.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>

        <!-- Google Webfonts and our stylesheet -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="impress" class="impress-not-supported">

            <!-- The Slides Will Go Here -->

        </div>

        <a id="arrowLeft" class="arrow">&lt;</a>
        <a id="arrowRight" class="arrow">&gt;</a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/impress.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Nada inusual aquí. Junto con las fuentes web de Google incluidas en el encabezado, también tenemos nuestra hoja de estilo principal (volveremos a ella en la siguiente sección) y varios archivos fuente de JavaScript antes de la etiqueta del cuerpo de cierre.

El #impresionar div mantendrá las diapositivas. Se requiere la identificación para ser reconocido por impress.js (Puede anular esto pasando una identificación diferente a la llamada de función de impresión en script.js). Después de esto, tenemos las flechas que inician las transiciones de diapositivas.

Por último en la página, tenemos nuestros archivos fuente de JavaScript. impresionar.js es independiente y no necesita jQuery para funcionar, pero lo incluiremos para que podamos escuchar los clics en las flechas en nuestro script.js archivo.

Cada una de las diapositivas de nuestro escaparate contiene tres elementos:un título , un párrafo de texto y una imagen de teléfono inteligente . Todos estos están posicionados de forma única para cada diapositiva. Las imágenes promocionales y el texto de este ejemplo se tomaron del sitio web Galaxy Nexus de Google.

Los elementos de las diapositivas se agrupan en "paso individuales " divs dentro del contenedor #impress. Con esto hemos preparado el escenario para impress.js !

Uso de impress.js

Con esta pequeña biblioteca, podemos crear transiciones suaves de CSS3 entre las diapositivas de nuestro escaparate. Para hacer esto, tenemos que instruir a impress.js sobre cómo orientar las diapositivas. Esto es fácil de hacer:usaremos atributos de datos en los divs de pasos. La biblioteca traduce estos atributos en transformaciones CSS3 reales, según el navegador actual, y afectan a la diapositiva.

Impress.js admite varios atributos:

  • datos-x , datos-y , datos-z moverá la diapositiva en la pantalla en el espacio 3D;
  • rotación de datos , datos-rotar-x , rotación-de-datos-y rotar el elemento alrededor del eje especificado (en grados);
  • escala de datos - agranda o encoge la diapositiva.

Puede ver el marcado de las diapositivas a continuación:

<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
    <h2>Introducing Galaxy Nexus</h2>
    <p>Android 4.0<br /> Super Amoled 720p Screen<br />
    <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>

<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
    <h2>Simplicity in Android 4.0</h2>
    <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
    <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
    <h2>Connect &amp; Share</h2>
    <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
    <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>

<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
    <h2>Instant Upload</h2>
    <p>Your photos upload themselves with Instant Upload, which makes ..</p>
    <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>

<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
    <h2>Jam on with Google Music</h2>
    <p>Google Music makes discovery, purchase, and listening effortless and..</p>
    <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>

Cuando comience la presentación de diapositivas, impress.js compensará estas transformaciones y aplicará las reglas inversas al div #impress con una transición suave de CSS. El resultado es la llamativa presentación que ve en la demostración. Por supuesto, esto tiene el precio de ajustar manualmente los atributos de datos de cada diapositiva para obtener el mejor resultado.

El CSS

Para que la presentación funcione, tendremos que aplicar algunas reglas CSS. El primer paso es diseñar el contenedor de la presentación y declarar el estilo predeterminado para los elementos de la diapositiva.

activos/css/estilo.css

/*----------------------------
    Styling the presentation
-----------------------------*/

#impress:not(.impress-not-supported) .step{
    opacity:0.4;
}

#impress .step{
    width:700px;
    height: 600px;
    position:relative;
    margin:0 auto;

    -moz-transition:1s opacity;
    -webkit-transition:1s opacity;
    transition:1s opacity;
}

#impress .step.active{
    opacity:1;
}

#impress h2{
    font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
    color:#444648;
    position:absolute;
    z-index:10;
}

#impress p{
    font: normal 18px/1.3 'Open Sans', sans-serif;
    color:#27333f;
    position:absolute;
    z-index:10;
}

#impress img{
    position:absolute;
    z-index:1;
}

Como puede ver en las reglas anteriores y en el fragmento HTML al comienzo de este tutorial, al contenedor #impress se le asigna un .impress-not-supported clase. La clase se elimina solo si el navegador actual admite la funcionalidad requerida para que la biblioteca se ejecute correctamente.

Ahora necesitamos diseñar las diapositivas individuales. Solo incluiré las clases para la primera diapositiva aquí, puedes encontrar el resto en assets/css/styles.css .

/*----------------------------
    Slide 1 - Intro
-----------------------------*/

#impress #intro{
    width: 500px;
}

#intro h2{
    text-align: center;
    width: 100%;
}

#intro p{
    font-size: 22px;
    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#intro img{
    top: 120px;
}

Todo lo que queda es un fragmento JS rápido para iniciar impress.js y escuchar los clics en las flechas.

jQuery

Para inicializar la biblioteca de impresión, debemos llamar al método del mismo nombre. Esto también devolverá un nuevo objeto, con métodos para mostrar las diapositivas anteriores/siguientes.

secuencia de comandos.js

$(function(){

    var imp = impress();

    $('#arrowLeft').click(function(e){
        imp.prev();
        e.preventDefault();
    });

    $('#arrowRight').click(function(e){
        imp.next();
        e.preventDefault();
    });

});

¡Con esto, nuestro impresionante escaparate de productos está completo!

¡Listo!

Puede usar este ejemplo para productos y páginas de destino, exhibiciones de funciones y, con un poco de aleatorización, incluso podría convertirlo en una galería de imágenes.