Come creare una dashboard simil Windows8 con CSS3 e jQuery

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

 
by Janeth Kent Date: 19-07-2013 web development css3 javascript windows8 metro demo sviluppo script codice visite : 7944  
 
Janeth Kent

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.

 
 
 

Articoli correlati

Un approccio a Java: Il ciclo while

Ciao a tutti e bentornati! Dopo aver fatto una breve, ma corposa, introduzione sui cicli, andiamo oggi a vedere finalmente le prime implementazioni che utilizzano quello che abbiamo definito ciclo precondizionale. In Java, come…

Un approccio a Java: I cicli - Introduzione

Ciao a tutti e bentornati! Sino ad ora, abbiamo parlato di variabili e di strutture di selezione, andando a considerare alcuni degli aspetti fondamentali di questi due concetti. Teoricamente, per…

Un approccio a Java: operatori booleani

La volta precedente, abbiamo ampiamente parlato delle variabili booleane, cercando di delineare quali siano le principali operazioni che si possono effettuare proprio a livello pratico.  Di tutti i casi esaminati, non abbiamo…

come trasformare il tuo smartphone in una webcam per il tuo pc

Con la propagazione del Covid-19 tutti noi abbiamo dovuto adattarci a una nuova situazione di quarantena in casa, e, dato che l'essere umano ha bisogno di comunicare costantemente, abbiamo usato…

Webinar e Online Class: Le migliori app free(o quasi) per fare lezione anche da casa

A causa del motivo contingente di clausura, anche il modo di lavorare classico ha dovuto subire uno scossone e adeguarsi ai paesi più tecnologici in cui questo modo di lavorare…

Java algoritmi di ordinamento: Merge Sort

Andiamo oggi ad analizzare uno tra i migliori algoritmi di ordinamento: il Merge Sort. Detto anche algoritmo per fusione, fa parte della famiglia dei Divide and Conquer proprio come il Quick Sort. A differenza del…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Come creare un aplicazione Vue.js in 5 minuti

Vue.js sta acquisendo sempre più popolarità, diventando un importante concorrente di framework come Angular o React.js. Come framework per i principianti, conquista i cuori dei giovani sviluppatori front-end e delle…

Java algoritmi di ordinamento: Bubble Sort

Programmando, nasce spesso la necessità di ordinare le collezioni di dati o oggetti che devono poi essere manipolate. Ordinare una lista può essere utile nei casi in cui si debbano…

Java Design Pattern: Prototype Pattern

Andremo ora a parlare di un pattern creazionale che ci permette di "copiare con classe". Sì, anche se sembra strano, il compito fondamentale di questo pattern è copiare. Sto parlando…

Java Design Pattern: Builder Pattern

Andiamo oggi a parlare di un pattern creazionale che in molte situazioni può rappresentare una valida alternativa alla costruzione di oggetti mediante costruttori: il Builder Pattern. La necessità di introdurre meccanismi…

Java Design Pattern: Strategy Pattern

Uno dei pattern che gode di una notevole popolarità ed è al contempo piuttosto semplice è lo Strategy Pattern. Membro della famiglia dei pattern comportamentali, ha il compito di gestire algoritmi,…