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 admin admin Date: 19-07-2013 web development css3 javascript windows8 metro demo sviluppo script codice visite : 4600  
 
 
 
 

Articoli correlati

    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,…

    Java Design Pattern: Factory Pattern

    Continuando il discorso sui design pattern iniziato precedentemente, andiamo oggi a vedere un altro pattern molto utilizzato: il Factory Method Pattern. Il GoF (Gang of Four Design Patterns) lo definisce così: Definisce…

    Java: Introduzione ai design pattern: Singleton

    Chiunque abbia anche una minima esperienza di programmazione, si sarà reso conto di come i problemi sianoricorrenti. Infatti troviamo spesso problemi con uno stesso pattern ma con contesti differenti. Ad esempio, un…

    Java 12, finalmente meno prolisso?

    Conosciamo tutti Java per le sue caratteristiche grazie alle quali, nonostante siano passati più di 20 anni dalla prima versione,è tutt'oggi uno dei linguaggi più studiati e più utilizzati, malgrado…

    Deep web: 5 fatti di cui non si è a conoscenza

    Il deep web è uno spazio Internet in cui sono ospitati i contenuti che non compaiono nei motori di ricerca convenzionali, a causa di vari fattori che non devono necessariamente…

    Kali Nethunter, lo store per gli hacker etici

    A volte i pentesters o gli stessi programmatori di un azienda, hanno bisogno di analizzare gli URL o effettuare dei test di penetrazione. Lo scopo dell’attività è quindi quello di scovare…

    JQuery morirà nel 2019?

    Per un po' di tempo, la centralità di JQuery è stata oggetto di dibattito tra gli sviluppatori web. Come programmatori web interessati a Javascript, eravamo curiosi di sapere che opinioni…