Hacer un sitio web Slick MobileApp con jQuery y CSS

Como desarrollador web, debe aportar creatividad y atención a los detalles en su trabajo. A menudo son las pequeñas cosas las que dejan una impresión duradera en el visitante. Ya sea una adorable ilustración de un personaje o una presentación de diapositivas única, por lo general no es la información que presentas lo que es memorable, sino la forma en que la presentas.

Hoy estamos creando un sitio web jQuery y CSS completo para una aplicación móvil ficticia. Va a presentar marcado semántico y un efecto de presentación de diapositivas progresivamente mejorado. Permitirá al usuario ver cuatro de los teléfonos inteligentes más populares que ejecutan la aplicación móvil.

Paso 1 - XHTML

Al crear sitios web, es importante que establezca su código de forma semántica. Esto incluiría el uso de etiquetas para lo que se suponía que debían usarse. Debe usar encabezados para títulos, párrafos para texto (en lugar de divisiones genéricas) y listas cuando corresponda.

aplicación móvil.html

<div id="page">

    <h1 id="logoh1"><a href="/" id="logo">MobileApp - the most useful mobile app!</a></h1>

    <div id="phoneCarousel">
        <div class="previous arrow"></div>
        <div class="next arrow"></div>

        <div id="stage">
            <img id="iphone" class="default" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" />
            <img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" />
            <img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" />
            <img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" alt="BlackBerry" />
        </div>
    </div>

    <img class="availableAppStore" src="img/available_on_the_appstore.png" width="230" height="80" alt="Available on the Appstore" />

    <div class="text">
        <h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" class="thumb" />A wonderful app</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

    <div class="text">
        <h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" class="thumb" />More awesome facts</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

</div>

Este es todo el marcado que se utiliza para mostrar el sitio web. El encabezado h1 contiene un hipervínculo que tiene el estilo del logotipo (la imagen del logotipo se establece como fondo del hipervínculo y se usa una sangría de texto negativa para ocultar el texto del enlace).

Después de esto tenemos el #phoneCarousel div y dentro están las flechas y el escenario. Las imágenes del teléfono dentro del escenario se rotan con jQuery como verás en un momento.

Por último tenemos el Disponible en la tienda de aplicaciones insignia y dos bloques de texto.

Paso 2:CSS

CSS es responsable de convertir nuestro marcado semántico en un verdadero sitio web. Echa un vistazo más de cerca al #escenario estilos en la segunda parte del código, ya que estos son los que hacen posible la animación.

estilos.css - Parte 1

body{
    font-size:14px;
    color:#515151;
    background:url('img/bg.png') repeat-x #f6f8f9;
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
}

#logoh1{ margin:40px 0 0;}

#page{
    /* This the main container div */
    width:1000px;
    min-height:700px;
    margin:0 auto;
    background:url('img/bokeh.jpg') no-repeat 0 120px;
    position:relative;
    padding-top:1px;
}

#phoneCarousel{
    /*  This is the carousel section, it
        contains the stage and the arrows */
    height:390px;
    margin:90px auto 120px;
    position:relative;
    width:800px;
}

#phoneCarousel .arrow{
    /* The two arrows */
    width:44px;
    height:44px;
    background:url('img/arrows.png') no-repeat;
    position:absolute;
    top:50%;
    margin-top:-22px;
    left:0;
    cursor:pointer;
}

#phoneCarousel .next{
    /* Individual styles for the next icon */
    background-position:right top;
    left:auto;
    right:0;
}

/* Hover styles */

#phoneCarousel .arrow:hover{
    background-position:left bottom;
}

#phoneCarousel .next:hover{
    background-position:right bottom;
}

Después de definir los estilos del cuerpo, podemos pasar a diseñar la #página div, que mantiene todo junto. Su imagen de fondo tiene un desplazamiento de 120 píxeles verticalmente, por lo que coincide con el fondo del cuerpo y ocupa todo el ancho de la página.

El siguiente es el #phoneCarousel división Tiene aplicado un posicionamiento relativo, por lo que el escenario (donde tienen lugar todas las animaciones) se puede centrar correctamente. Las flechas anterior/siguiente también tienen estilo.

estilos.css - Parte 2

#logo{
    background:url('img/logo.png') no-repeat;
    height:40px;
    text-indent:-9999px;
    width:210px;
    display:block;
}

#stage{
    /* The stage contains the animated phone images */
    left:50%;
    margin-left:-350px;
    position:absolute;
    width:700px;
    height:100%;
}

#stage img{
    /* Hiding all the images by default */
    display:none;
}

#stage .default{
    /*  This class is applied only to the iphone img by default
        and it is the only one visible if JS is disabled */
    display:block;
    left:50%;
    margin-left:-135px;
    position:absolute;
}

#stage .animationReady{
    /* This class is assigned to the images on load */
    display:block;
    position:absolute;
    top:0;
    left:0;
}

.text{  margin-top:70px;width:700px;}

.text p,
.text h3{
    padding-bottom:15px;
    line-height:1.4;
    text-align:justify;
}

.text h3{   font-size:30px;}
.text p{    font-size:20px;}

.thumb{ float:left;margin-right:40px;}

.availableAppStore{float:right;}

En la segunda parte de la hoja de estilos, continuamos con el #stage estilos. Las imágenes del teléfono están ocultas de manera predeterminada, por lo que si JavaScript está deshabilitado, el usuario no se queda con un montón de imágenes dispersas.

Como verá en el siguiente paso, la animación se logra cambiando las propiedades CSS superior e izquierda. Para que esto funcione, las imágenes deben estar absolutamente posicionadas. Por eso .animatonReady la clase se asigna al cargar con jQuery (si JS está deshabilitado, este estilo no se aplicaría).

Por último, diseñamos los bloques de texto, que explican detalles sobre nuestra aplicación móvil ficticia.

Paso 3:jQuery

Cuando hace clic en una de las flechas, comienza una animación que utiliza cálculos de seno y coseno para mover y reducir la escala de las imágenes, creando la ilusión de un movimiento circular. No es tan complicado como parece, como puedes ver por ti mismo en el siguiente código.

secuencia de comandos.js

$(document).ready(function(){

    var deg=0;

    /* Storing all the images into a variable */

    var images  = $('#stage img').removeClass('default').addClass('animationReady');
    var dim     = { width:images.width(),height:images.height()};

    var cnt = images.length;

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

    function rotate(step,total){
        // This function will loop through all the phone images, and rotate them
        // with "step" degrees (10 in this implementation) till total > 0

        /* Increment the degrees: */
        deg+=step;

        var eSin,eCos,newWidth,newHeight,q;

        /* Loop through all the images: */
        for(var i=0;i<cnt;i++){

            /* Calculate the sine and cosine for the i-th image */

            q = ((360/cnt)*i+deg)*Math.PI/180;
            eSin        = Math.sin(q);
            eCos        = Math.cos(q);

            /*
            /   With the sine value, we can calculate the vertical movement,
            /   and the cosine will give us the horizontal movement.
            */

            q = (0.6+eSin*0.4);
            newWidth    = q*dim.width;
            newHeight   = q*dim.height;

            /*
            /   We are using the calculated sine value (which is in the range
            /   of -1 to 1) to calculate the opacity and z-index. The
            /   frontmost image has a sine value of 1, while the backmost
            /   one has a sine value of -1.
            */

            // eq() extracts the image at the i-th position:

            images.eq(i).css({
                top         : centerY+15*eSin,
                left        : centerX+200*eCos,
                opacity     : 0.8+eSin*0.2,
                marginLeft  : -newWidth/2,
                zIndex      : Math.round(80+eSin*20)
            }).width(newWidth).height(newHeight);
        }

        total-=Math.abs(step);
        if(total<=0) return false;

        // Setting the function to be run again in 40 milliseconds (equals to 25 frames per second):
        setTimeout(function(){rotate(step,total)},40);

    }

    // Running the animation once at load time (and moving the iPhone into view):
    rotate(10,360/cnt);

    $('#phoneCarousel .previous').click(function(){
        // 360/cnt lets us distribute the phones evenly in a circle
        rotate(-10,360/cnt);
    });

    $('#phoneCarousel .next').click(function(){
        rotate(10,360/cnt);
    });
});

Para iniciar una animación, solo necesita llamar a rotar función con dos argumentos:un paso y una rotación total, ambos números. El paso puede ser negativo, lo que significaría que la rotación se ejecuta en sentido contrario. Cada vez que se ejecuta la función, el total se reduce con el valor absoluto del paso y, una vez que llega a cero, la animación se detiene.

En varios lugares de este código, puede ver que he usado un cálculo específico:360/cnt . Esto se hace para distribuir los teléfonos de manera uniforme (siendo 360 el número de grados en un círculo). De esta manera, puede agregar o eliminar imágenes y se animarán correctamente.

¡Con esto nuestro sitio web Slick MobleApp está completo!

Envolviéndolo

Hoy creamos un sitio web completo de jQuery y CSS para una aplicación móvil ficticia. Eres libre de modificar el código y usarlo de la forma que creas conveniente. Si te gustó el tutorial, asegúrate de suscribirte a nuestro canal RSS, síguenos en Twitter o deja un comentario en la sección a continuación.