Dibujo y animación de dispositivos con CSS3 y jQuery

Hace mucho quería hacer este tipo de animaciones con dispositivos para mi página. Ví un demo en codrops de dispositivos que cambian con una animación usando jQuery CSS3, se llamaba “morphin devices css”, pero el código JavaScript era muy extenso y no tenia tanto tiempo tratando de entender todo el código. Luego descubrí otra forma mucho mas fácil, así que como todo buen frontend empecé hacer el mío desde cero basado en esta demo.

Dibujar los dispositivos con CSS3

Lo primero que haremos será el monitor de imac en CSS3. Para esto debemos pensar en 2D, ver el el monitor, descomponerlo y ver cuántos elemento necesitaríamos. Vieron eso que hacía el Doctor Manhattan con un motor en la película Watchmen? Bueno parecido

En esta imagen se representa gráficamente lo que necesitamos hacer:

Código :

 <div class="dispositivo">
        <div class="carcasa">
                <div class="pantalla"></div>
                <div class="sam"><img src="img/log_sam.png" alt=""></div>
                <div class="botoncito"></div>
        </div>
        <div class="base">
                <div class="apple"><i class="fa fa-apple"></i></div>
        </div>
        <div class="soporte"></div>
        <div class="sop2"></div>
</div> <!--dispositivo-->

Nos quedará un monitor de imac parecido a esto:

No es igual igual pero ahí va..

Con esto ya podemos pensar en el CSS de cada uno de ellos. Agregamos sus respectivas propiedades y valores, por ejemplo para cada uno sería importante agregar ancho, largo, color y posición.

Lo demás serán adornos como los bordes, sombras y otras propiedades, ya depende de tí y tus gustos. Yo por ejemplo puse una imagen de un logo y el icono de Apple usando font awesome, aunque pueden usar el webfont que gusten.

Transiciones en CSS3

Les agregamos la propiedad de transition: all a cada uno, para que cualquier cambio en el CSS tenga una transición animada.

Para el que no tenga bien claro como funcionan las transiciones, aca un tuto sobre transiciones.

Veamos el CSS3 de cada uno con su respectiva transición:

Código :

.dispositivo {
  position:relative;
}
.dispositivo .carcasa {
  background-color:#464E59;
  border-radius:10px 10px 0 0;
  height:200px;
  left:13px;
  padding:13px;
  position:relative;
  width:325px;
  transition:all 0.5s cubic-bezier(0,.65,0,1.54);
  -webkit-transition:all 0.5s cubic-bezier(0,.65,0,1.54);
}
.dispositivo .pantalla {
  background-color:#3B434E;
  height:170px;
  position:relative;
  width:300px;
transition:all 0.5s cubic-bezier(0,.65,0,1.54);
  -webkit-transition:all 0.5s cubic-bezier(0,.65,0,1.54);
}
.dispositivo .sam {
  bottom:-4px;
  left:94px;
  opacity:0;
  position:relative;
  position:relative;
  transition:all 0.5s ease;
  -webkit-transition:all 0.3s ease;
}
.dispositivo .lg {
  bottom:80px;
  left:214px;
  opacity:0;
  position:relative;
  transition:all 0.5s ease;
  -webkit-transition:all 0.3s ease;
}
.apple i {
  background-color:#bbb;
  font-size:21px;
  -webkit-background-clip:text;
  -moz-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:rgba(255,255,255,0.5) 0px 3px 3px;
}
.dispositivo .apple {
  color:white;
  left:154px;
  opacity:1;
  position:relative;
  top:4px;
  transition:all 0.5s ease;
  -webkit-transition:all 0.3s ease;
}
.dispositivo .botoncito {
  border-radius:10px;
  bottom:-6px;
  height:1px;
  left:63px;
  opacity:0;
  position:relative;
 transition:all 0.5s ease;
  -webkit-transition:all 0.3s ease;
}
.dispositivo .base {
  position:relative;
  left:13px;
  width:325px;
  height:37px;
  background-color:#EBEBEB;
  border-radius:0 0 10px 10px;
  border:1px solid #D3D5D6;
  transition:all 0.5s cubic-bezier(0,.65,0,1.54);
  -webkit-transition:all 0.5s cubic-bezier(0,.65,0,1.54);
}
.dispositivo .soporte {
  left:13px;
  width:80px;
  height:34px;
  position:relative;
  background-color:#DDDDDF;
  left:137px;
  border-top:8px solid #C9CACC;
  transition:all 0.5s cubic-bezier(0,.65,0,1.54);
  -webkit-transition:all 0.4s cubic-bezier(0,.65,0,1.54);
}
.dispositivo .sop2 {
  width:118px;
  height:6px;
  position:relative;
  background-color:#F0F0F0;
  left:118px;
  border-bottom:2px solid #C9CACC;
  transition:all 0.5s cubic-bezier(0,.65,0,1.54);
  -webkit-transition:all 0.5s cubic-bezier(0,.65,0,1.54);
}

Si algunos notaron algo raro, como una declaración de la propiedad transition llamada cubic-bezier, sepan que con esta declaración podemos hacer efectos de boucing, retard y otros como nosotros lo queramos y en el tiempo que queramos, para eso existen parámetros que nos ayudan a tener el efecto deseado.

Aqui les dejo la herramienta Cubic-Bezier para lograr el efecto que más les guste.

Ahora la parte más interesante…¿Cómo hago para que cambie de forma?

Animar los dispositivos con CSS3 y selectores de atributos

Algunos ya habrán pensado en usar keyframes pero sería un poco engorroso, y el código de CSS se haría un poco extenso, por eso usaremos selectores de atributo.



Pondremos la variable .dispositivo y le atribuimos el nombre de atributo que será data-animation-step y un valor que será 1 para el primer dispositivo que haremos. De por sí, estos atributos no tendrían ningún efecto si no se le agregan al elemento html lógicamente.

El primer dispositivo al que cambiará nuestro imac será un portátil. Les mostraré el CSS y les explicaré, pero antes tendrán que hacer esto en la clase dispositivode su html.

Código :

<div class="dispositivo" data-animation-step="1">

Porque? lo veremos más adelante. Ahora:

Código :

/************************************portatil*/
.dispositivo[data-animation-step="1"] .carcasa {
  background-color:#4E535A;
  width:272px;
  left:40px;
}
.dispositivo[data-animation-step="1"] .pantalla {
  width:245px;
  background-color:#3B434E;

}
.dispositivo[data-animation-step="1"] .apple {
  opacity:0;
}
.dispositivo[data-animation-step="1"] .base {
  width:325px;
  right:-13px;
  height:14px;
  border-bottom:3px solid #ccc;
}
.dispositivo[data-animation-step="1"] .soporte {
  opacity:0;
}
.dispositivo[data-animation-step="1"] .sam {
  opacity:1;
  bottom: 2px;
}
.dispositivo[data-animation-step="1"] .sop2 {
  opacity: 0;
}

Lo que hago acá es alterar el CSS de los elementos con las clases que ya habíamos creado, de modo tal que ya parezca un portátil.

• Si pueden notar, achiqué la carcasa y la pantalla y les cambié la posición un poco para que encajaran.
  
• El alto de la base lo achiqué también y le puse bordes para que parezca la base del portátil.
  
• Un portátil no necesita un soporte de monitor así que lo hice desaparecer con opacity: 0;
  

Si se agrego el atributó data-animation-step="1" a la clase .dispositivo en el HTML, éste tomará solo las propiedades de las clases que tengan data-animation-step con valor 1 en el CSS.

En este ejemplo tendremos un archivo HTML y CSS el cual solo se edita el HTML para ver resultados.


Con esto puedo hacer los demás dispositivos e ir editando cada uno gracias al atributo y dependiendo de su valor sera el dispositivo que editaré.

CSS Completo de las propiedades alternativas para cada dispositivo

Código :

/************************************portatil*/
.dispositivo[data-animation-step="1"] .carcasa {
  background-color:#4E535A;
  width:272px;
  left:40px;
}
.dispositivo[data-animation-step="1"] .pantalla {
  width:245px;
  background-color:#3B434E;

}
.dispositivo[data-animation-step="1"] .apple {
  opacity:0;
}
.dispositivo[data-animation-step="1"] .base {
  width:325px;
  right:-13px;
  height:14px;
  border-bottom:3px solid #ccc;
}
.dispositivo[data-animation-step="1"] .soporte {
  opacity:0;
}
.dispositivo[data-animation-step="1"] .sam {
  opacity:1;
  bottom: 2px;
}
.dispositivo[data-animation-step="1"] .sop2 {
  opacity: 0;
}
/******************************************tablet*/
.dispositivo[data-animation-step="2"] .carcasa {
  background-color:#fff;
  border:1px solid #ccc;
  border-bottom:4px solid #ccc;
  border-right:3px solid #ccc;
  width:177px;
  height:251px;
  border-radius:5px;
  left:73px;
}
.dispositivo[data-animation-step="2"] .apple {
  opacity:0;
}
.dispositivo[data-animation-step="2"] .pantalla {
  background-color:#3B434E;
  width:150px;
  height:210px;
}
.dispositivo[data-animation-step="2"] .botoncito {
  background:#F8F8F8;
  border-bottom:2px solid #ccc;
  height:10px;
  opacity:1;
  width:20px;
  bottom: 40px;
}
.dispositivo[data-animation-step="2"] .base {
  opacity:0;
}
.dispositivo[data-animation-step="2"] .soporte {
  opacity:0;
}
.dispositivo[data-animation-step="2"] .sop2 {
  opacity: 0;
}
/************************************celular 3*/
.dispositivo[data-animation-step="3"] .carcasa {
  background-color:#3B3E42;
  border-radius:7px;
  border:1px solid #9C9C9C;
  height:152px;
  padding:8px;
  position:relative;
  width:292px;
  left:20px;
}
.dispositivo[data-animation-step="3"] .pantalla {
  background-color:#3B434E;

  width:235px;
  height:133px;
  left:24px;
}
.dispositivo[data-animation-step="3"] .botoncito {
  width:9px;
  height:37px;
  border-radius:7px;
  background-color:#3B3E42;
  border:1px solid #9C9C9C;
  left:4px;
  bottom:130px;
  opacity:1;
}
.dispositivo[data-animation-step="3"] .soporte {
  opacity:0;
}
.dispositivo[data-animation-step="3"] .apple {
  opacity:0;
}
.dispositivo[data-animation-step="3"] .base {
  opacity:0;
}
.dispositivo[data-animation-step="3"] .sop2 {
  opacity:0;
}

Cuando hayas terminado de editar todos los dispositivos, retiras el atributo con su valor del html, con esto sólo quedará el modelo principal que es el monitor.

Controlar el HTML y el CSS3 con jQuery

Ahora lo único que necesitamos es algo que agregue el atributo y automáticamente cambie su valor constantemente para que se vea como cambia de dispositivo a dispositivo, y ese algo es jQuery.

Le que queremos hacer con jQuery es lo siguiente:

• que seleccione la clase,
  
• le agregue el atributo,
  
• y cambie su valor en un intervalo de tiempo.
  

Aquí les dejo el script explicado:

Código :

//declaramos variables primero hacer los cambios facilmente
   var duration = 5000, // duracion en milisegundos sin efecto despues de cada animacion.
       step = 1; //veces que se cumplira la funcion.
       steps = 4, //esta variable representa hasta cuantos atributos tenemos en el css.
  
//utilizamos la funcion setInterval para que nuestra animacion se cumpla cada cierto tiempo 
//el cual ya declaramos en nuestras variables.
   setInterval( function() {
//con document.querySelector seleccionamos al la clase madre de todos los elementos en el.
//.setAttribute creara el atributo que hemos nombrado en el css y lo colocara en la clase .dispositivo que hemos seleccionado con jqueryselector
//el valor que tienen los atributos cambiara con el bucle "for" que creamos 
    document.querySelector( '.dispositivo' ).setAttribute( 'data-animation-step', step = ++step > steps ? 1 : step );
  }, duration / steps );
   //al final no estan mas que los valores del setInterval.

Sí, yo también pensé que sería más largo, pero más fácil no se puede. Con esto se obtiene el siguiente resultado:

Ver Ejemplo

Tratando de estudiar el código y ver cómo aprender y usar de manera eficaz CSS3 uno mismo, depara un mundo sin límites de posibilidades para animar y programar.

Bueno y con eso he terminado, espero que les haya servido y también haberme explicado bien. De todos modos, cualquier duda, consejo, aporte, aclaración comenten! es de verdad importante, no solo para mí si no para todos compartir conocimiento no creen?

Nos veremos en otro tutorial para ver que hay detrás de cada animación y/o programación
nos vemos!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.