Come creare una dashboard simil Windows8 con CSS3 e jQuery

Come creare un'animazione simil Windows8 con CSS3 e jQuery

1. Markup
2. CSS
3. Javascript

IL MARKUP

L'intera struttura è abbastanza semplice: La dashboard è costituita da una serie di "box" o riquadri, di due dimensioni, floatanti dentro 3 colonne.

Veniamo alle pagine interne. Una pagina è un overlay (elemento sovrapposto) che viene visualizzato nel momento in cui si fa click su uno dei box della dashboard; rappresenta una sorta di app su un desktop reale, nella quale ogni casella o box ne costutuisce uno shortcut. In questo modo, quando si clicca su una casella, la pagina si apre con il suo effetto 3D corrispondente.
Questo è il codice che implementa la struttura della dashboard:

<div class="dashboard clearfix">

  <div class="col1 clearfix">

    <div class="big todos-thumb" data-page="todos">

      <p>My Todos

        <span class="todos-thumb-span">You have 5 more tasks to do!</span>

      </p>

    </div>

    <div class="small lock-thumb">

      <span class="icon-font  center" aria-hidden="true" data-icon=""></span>

    </div>

    <div class="small last cpanel-thumb" data-page="cpanel">

      <span class="icon-font" aria-hidden="true" data-icon=""></span>

    </div>

    <div class="big notes-thumb" data-page="notes">

      <span class="icon-font" aria-hidden="true" data-icon=""></span>

      <p> Notes</p>

    </div>

    <div class="big calculator-thumb" data-page="random-page"></div>

  </div>

  <div class="col2">

    <!--....-->

  </div>

  <div class="col3">      

    <!--....-->

  </div>

</div>

Per questo progetto, al fine di rendere il layout simile a quello di Windows8 vi suggerisco di utilizzare il pacchetto di icone offerto da  Icomoon.

Potete notare l'uso dell'elemento span per le icone, che ovviamente può essere sostituito da uno pseudo elemento, ma, dal momento che le transizioni sugli pseudo elementi non sono supportate da tutti i browser (per ora), ho preferito utilizzare il vecchio metodo.

Ho aggiunto anche un  data-page="random-page" alla maggior parte delle caselle, solo le prime, Todo App and Lock, hanno le loro proprie pagine (es data-page="todos").

Si noti che sto usando i data attributes su ogni box per memorizzare il nome della pagina corrispondente che si apre quando si fa clic sullo stesso. Il vantaggio consiste nel risparmiarsi poi, molte righe di javascript!

Ora eccovi la struttura delle pagine in overlay:

<div class="page todos">

  <h2 class="page-title">My Todos</h2>

  <!--content of page goes here-->

  <div class="close-button">x</div>

</div>


<div class="page random-page">

  <h2 class="page-title">Some Awesome App!</h2>

  <!--content of page goes here-->

  <div class="close-button">x</div>

</div>

IL CSS

Andremo ad operare prima sullo stile per i dispositivi mobili e dopo, attraverso le media query ci occuperemo delle device di grandi dimensioni.

Per prima cosa scriviamo lo stile di .demo-wrapper il contenitore che ospiterà il nostro progetto.

Assicuriamoci di aggiungere l'atributo perspective per attivare l'effetto 3D, altrimenti il tutto risulterà piatto e bidimensionale.

/*stile generale*/

html{

  height:100%; 

  overflow-y:scroll;

  overflow-x:hidden;

}

body{

  width:100%;

  height:100%;

  line-height:1.5;

  font-family:'Lato', sans-serif;

  font-weight:300;

  font-size:16px;

}

ul{

  list-style-type: none;

}

/*stile dashboard e pagine */


.demo-wrapper{

  background:url("1.png");

  background-size:cover;

  padding: 4em .5em; 

  width:100%; 

  perspective:3300px;

  position:relative;

  overflow:hidden;

  border-bottom:1px solid #eee;

}

.dashboard{

  margin:0 auto; 

  width:100%;

  padding:1em;

}

.col1, .col2, .col3{

  width:99%; 

  margin:1em auto;

}

.page{

  width:100%;

  height:100%;

  color:white;

  text-align:center;

  font-size:3em;

  font-weight:300;

  position:absolute;

  right:0;

  top:0;

  opacity:0;

  transform-origin: 100% 0%; 

  transform:rotateY(-90deg) translateZ(5em);

}

.page-title {

  margin-top:1em; 

  font-weight:100; 

  font-size:2.5em;

}


/*stile delle pagine*/

 

.page.random-page{

  background:#DFD4C1;

}

 

.page.todos{

  background:#2FB1BE;

}

 
/*il bottone di chiusura in alto a destra di ogni pagina*/


.close-button{

  font-size:1em;

  width:1em; 

  height:1em; 

  position:absolute; 

  top:1.25em; 

  right:1.25em; 

  cursor:pointer; 

  border:1px solid white;

  line-height:.8em;

  text-align:center;

}

Ho impostato la posizione originale di ogni pagina nello spazio 3D rotandola attorno all'asse y (l'asse verticale), poi ho spostato la pagina di 5em a sinistra dello schermo utilizzando translateZ.

Importante: quando si trasforma un elemento in 3D trasformate anche il suo sistema di coordinate.

Questo è lo stile adottato per le thumbnails della dashboard, con la transizione definita sull' :hover.

.big, .small{ 

  float:left; 

  margin:0 auto 1%; 

  font-size:2em;

  color:white;

  text-align:center; 

  height:4.5em; 

  font-weight:300;

  overflow:hidden;

  padding:.75em 1em;

  cursor:pointer;

  transition:all 0.3s ease-out;

}

.big:hover, .small:hover{

  background:white;

}

.big{

  width:100%; 

}

.small{

  width:49%;

  margin-right:2%;

}

.big p {

  line-height:1.5;

  margin-top:.6em;

  padding:0 .3em;

  transition:all 0.3s ease-out;

}

.small.last{

  margin-right:0;

}

 

/*icon fonts styles*/

 

 

.icon-font{

  font-size:2em;

}

.big .icon-font{

  float:left;

}

.lock-thumb .icon-font{

  margin-left:25%;

}


/* stile dei box*/

 

.weather-thumb {background:#F2854C;}

.weather-thumb:hover {color:#F2854C;}

 

.paint-thumb {background:#85A9C3;}

.paint-thumb:hover {color:#85A9C3;}

 

.cpanel-thumb {background:#83A8C3;}

.cpanel-thumb:hover {color:#83A8C3;}

 

.games-thumb {background:#04ACAD;}

.games-thumb:hover {color:#04ACAD;}

 

.news-thumb, .calculator-thumb {background:#EBB741;}

.news-thumb:hover, .calculator-thumb:hover {color:#EBB741;}

 

.videos-thumb, .shortcut-thumb{background:#BEA881;}

.videos-thumb:hover, .shortcut-thumb:hover{color:#BEA881;}

 

.lock-thumb, .alarm-thumb {background:#EF3A5B;}

.lock-thumb:hover, .alarm-thumb:hover {color:#EF3A5B;}

 

.piano-thumb, .favorites-thumb, .notes-thumb {background:#385E82;}

.piano-thumb:hover, .favorites-thumb:hover, .notes-thumb:hover {color:#385E82;}

 

.photos-thumb {background:#BEA881;}

.photos-thumb:hover {color:#BEA881;}

 

.calendar-thumb, .organizer-thumb {background:#8BBA30;}

.calendar-thumb:hover, .organizer-thumb:hover {color:#8BBA30;}

 

.todos-thumb {background:#2FB1BE;}

.todos-thumb:hover {color:#2FB1BE;}

 

.todos-thumb p{

  margin-top:.8em;

}

.todos-thumb-span{

  display:block;

  margin-top:1.5em;

}

.todos-thumb:hover p{

  margin-top:-2.7em;

}

Ogni thumbnail contiene un'icona con o senza contenuto testuale. L'overflow del box è settato su hidden per nascondere l'elemento span che raggiunge il bordo inferiore.Il paragrafo ha un margin-top settato a 8em e, una volta che viene attivato l'hover sulla thumbnail il margine si sposta a -2,7em. In questo modo il titolo della thumbnail si sposta verso l'alto.

Tutte le pagine, ad eccezione di quella preposta al LOG-IN hanno la stessa posizione iniziale nello spazio 3D. Una volta che una thumbnail viene cliccata, le viene aggiunta una classe corrispondente (via javascript) con un relativo effetto.

Ogni pagina, quindi, avrà un suo "class name" che ne definirà l'effetto 3D.

.openpage{ 

  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;

}

.slidePageLeft{

  transform: rotateY(0) translateZ(0) ; opacity:1;

  animation:slidePageLeft .8s ease-out 1 normal forwards;

}

Utilizziamo la Shorthand Property: animation.

L'ultimo valore forwards corrisponde alla proprietà animation-fill-mode , che deve obbligatoriamente essere impostata su forwards, altrimenti la pagina tornerà nella sua posizione iniziale terminando l'animazione. Quindi, al fine di mantenere la pagina aperta, ed essere in grado di creare animazioni sequenziali, l'elemento deve rimanere nello stato finale definito dalla prima animazione, e da lì iniziare la seconda animazione.

Queste sono gli stili per le animazioni delle pagine:

@keyframes rotatePageInFromRight{

  0% {transform:rotateY(-90deg) translateZ(5em);opacity:0}

  30% {opacity:1}

  100% {transform: rotateY(0deg) translateZ(0) ; opacity:1}

}


/*quando il bottone di chiusura viene cliccato, la pagina slitta sulla sinistra*/

/*la seconda animazione inizia nello stesso stato della fine dell'ultima animazione */
 

@keyframes slidePageLeft{

  0% {left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1}

  70% {opacity:1;}

  100% {opacity:0; left:-150%; transform: rotateY(0deg)}

}

Affinché possa partire la seconda animazione da dove la prima si è conclusa, è necessario definire lo stato finale della prima animazione nello stato iniziale della seconda.

La schermata di login viene posizionata inizialmente -150% a sinistra, cioè fuori dalla canvas. Quando la thumbnail per richiamarla viene cliccata, lo schermo prende il nome della classe in modo da attivare l'animazione.

Ecco gli stili della schermata di login, il nome della classe applicata allo schermo quando si clicca e le animazioni attivate sul blocco / sblocco dello schermo:

.login-screen{

  background:#EF3A5B;

  height:100%; 

  width:100%;

  position:absolute; 

  top:0;

  left:-150%;

  color:white;

  text-align:center;

  font-weight:300;

  z-index:1;

}

  .login-screen p{

    font-size:6em;

    margin-top:2em;

    font-weight:100;

  }

  .myform{

    margin:2em auto;

    width:300px;

  }

 

    input{

      display:block;

      line-height:40px;

      padding:0 10px; 

      width:260px;

      height:40px;

      float:left;

    }

    #unlock-button{

      background:black;

      color:white;

      font-size:1em;

      float:left;

      border:0;

      height:2.5em; 

      width:2.5em;

      padding:.3125em;

      text-align:center;

      cursor:pointer;

      border-radius:2px;

    }
.slidePageInFromLeft{

  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;

}

.slidePageBackLeft{

  opacity:1; 

  left:0;

  animation: slidePageBackLeft .8s ease-out 1 normal forwards;

}

@keyframes slidePageInFromLeft{

  0% {opacity:0; }

  30% {opacity:1}

  100% {opacity:1; left:0;}

}

@keyframes slidePageBackLeft{

  0% {opacity:1; left:0; transform: scale(0.95);}

  10% {transform: scale(0.9);}

  70% {opacity:1;}

  100% {opacity:0; left:-150%;}

}

Ora, veniamo all'animazione della dashboard.

Anche la dashboard ha un effetto di fade all'indietro, ossia svanisce lentamente all'indietro quando si clicca su una thumbnail, in poche parole: trasla lungo l'asse Z, si riduce e svanisce.

Le tre colonne della dashboard sono dissolvenza l'una dopo l'altra, con un leggero ritardo tra loro. Quando una pagina viene chiusa, viene aggiunta una classe per ogni colonna (tramite Javascript) e ciascuna di queste classi richiama l'animazione.

Ecco le classi applicate alla dashboard:

.fadeOutback{

 animation: fadeOutBack 0.3s ease-out 1 normal forwards;

}

.fadeInForward-1, .fadeInForward-2, .fadeInForward-3 {

  /*remember: in the second animation u have to set the final values reached by the first one*/

  opacity:0;

  transform: translateZ(-5em) scale(0.75);

  animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;

}

 

.fadeInForward-2{

  animation-delay: .55s;

}

.fadeInForward-3{

  animation-delay: .7s;

}

 

@keyframes fadeOutBack{

  0% {transform: translateX(-2em) scale(1); opacity:1;}

  70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}

  95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}

  100% {transform: translateZ(-5em) scale(0); opacity:0;}

}

@keyframes fadeInForward{

  0% {transform: translateZ(-5em) scale(0); opacity:0;}

  100% {transform: translateZ(0) scale(1); opacity:1;}

}

Ora definiamo le media queries:

@media screen and (min-width: 43.75em){

.col1,.col2,.col3{

  float:left;

  margin-right:1%;

  width:49%;

}

}

@media screen and (min-width: 64em){

.col1,.col2,.col3{

  float:left;

  margin-right:.5%;

  width:32%;

}

.col3{margin-right: 0;}

.col1{margin-left:2em;}

}

IL CODICE JAVASCRIPT

Tutti gli eventi, ovviamente sono trattati con javascript e jQuery.

function showDashBoard(){

  for(var i = 1; i <= 3; i++) {

    $('.col'+i).each(function(){

        $(this).addClass('fadeInForward-'+i).removeClass('fadeOutback');

    });

  }

}

 

function fadeDashBoard(){

  for(var i = 1; i <= 3; i++) {

    $('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i);

  }

}

 

$('.big, .small').each(function(){

  var $this= $(this),

      page = $this.data('page');

  $this.on('click',function(){

    $('.page.'+page).addClass('openpage');

    fadeDashBoard();

  })

});

 

$(".lock-thumb").click(function(){

    fadeDashBoard();

    $('.login-screen').addClass('slidePageInFromLeft').removeClass('slidePageBackLeft');

});

 

$('#unlock-button').click(function(){

      $('.login-screen').removeClass('slidePageInFromLeft').addClass('slidePageBackLeft');

      showDashBoard();

});

 

$('.close-button').click(function(){

  $(this).parent().addClass('slidePageLeft')

  //this function will detect the end of the animation, and remove the classes added before

  //so that the page will get back to its initial position after it has been closed

        .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

              $(this).removeClass('slidePageLeft').removeClass('openpage');

            });

    showDashBoard();

});

Spero di esser stata chiara, in ogni modo trovate il codice del progetto su Github, e qui una DEMO.

BROWSER CHE SUPPORTANO LE ANIMAZIONI:

Chrome, Firefox, Safarim, Opera, Explorer (parzialmente)

MOBILE/TABLET

Chrome per Android, Firefox per Android, Android Browser 3, iOS Safari 3.2, Opera Mobile

Credit del codice: Sara Sueidan -  freelance front-end web developer

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.