JSFiddle - React, Tailwind, and code Playground

Metro with JS

by Jennifer Perrin

HTML

<div class="demo-wrapper">
  <div class="login-screen">
    <p>Log In</p>
    <div class="myform">
      <input type="text" placeholder="Password" />
      <button data-icon="&#xe00c;" id="unlock-button"></button>
    </div>
  </div>
  <div class="page todos">
    <h2 class="page-title">My Todos</h2>
    <ul contenteditable>
      <li>Finish my 3D demo<span class="delete-button">x</span></li>
      <li>Design my blog<span class="delete-button">x</span></li>
      <li>Buy groceries<span class="delete-button">x</span></li>
      <li>Finish my todo app<span class="delete-button">x</span></li>
      <li>Organize my bookmarks<span class="delete-button">x</span></li>
    </ul>
    <div class="close-button">x</div>
  </div>
  
  <div class="page random-page">
    <h2 class="page-title">Some Awesome App!</h2>
    <div class="close-button">x</div>
  </div>

  <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="&#xe00d;"></span>
        </div>
        <div class="small last cpanel-thumb" data-page="random-page">
          <span class="icon-font" aria-hidden="true" data-icon="&#xe016;"></span>
        </div>
        <div class="big notes-thumb" data-page="random-page">
          <span class="icon-font" aria-hidden="true" data-icon="&#xe000;"></span>
          <p> Notes</p>
        </div>
        <div class="big calculator-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe017;"></span><p>Calculator</p></div>
      </div>
      <div class="col2 clearfix">
        <div class="big organizer-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe015;"></span><p>Contacts</p></div>
        <div...

CSS

/* 

DEMO FOR MY BLOG POST TUTORIAL 
How to Create Windows-8-like Animations with CSS3 and jQuery
http://blog.sarasoueidan.com/windows8-animations
Copyright Sara Soueidan
Demo is also available on Github

BEST VIEWED IN WEBKIT BROWSERS, and in the pen's FULL VIEW MODE

(The lock thumbnail opens a different page than the rest of the thumbs)
*/

@import url(http://fonts.googleapis.com/css?family=Lato:400,100,300);
@font-face {
  font-family: 'demo-icomoon';
  src:url('http://sarasoueidan.com/blog//windows8-animations/SourceCode/fonts/demo-icomoon.eot');
  src:url('http://sarasoueidan.com/blog//windows8-animations/SourceCode/fonts/demo-icomoon.eot?#iefix') format('embedded-opentype'),
    url('http://sarasoueidan.com/blog//windows8-animations/SourceCode/fonts/demo-icomoon.woff') format('woff'),
    url('http://sarasoueidan.com/blog//windows8-animations/SourceCode/fonts/demo-icomoon.ttf') format('truetype'),
    url('http://sarasoueidan.com/blog//windows8-animations/SourceCode/fonts/demo-icomoon.svg#demo-icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: 'demo-icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

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;
}
.demo-wrapper{
  background:url("http://sarasoueidan.com/blog/windows8-animations/SourceCode/images/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%;
 ...

JavaScript

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);
      }
    }
    
   // fadeDashBoard();
   
    $(".lock-thumb").click(function(){
        fadeDashBoard();
        $('.login-screen').addClass('slidePageInFromLeft').removeClass('slidePageBackLeft');
    });
    
    $('#unlock-button').click(function(){
          $('.login-screen').removeClass('slidePageInFromLeft').addClass('slidePageBackLeft');
          showDashBoard();
    });

  $('.big, .small').each(function(){
    var $this= $(this),
        page = $this.data('page');
    $this.on('click',function(){
      $('.page.'+page).addClass('openpage');
      fadeDashBoard();
    })
  });
  $('.close-button').click(function(){
    $(this).parent().addClass('slidePageLeft')
          .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                $(this).removeClass('slidePageLeft').removeClass('openpage');
              });
      showDashBoard();
  });