Loading

An Animated Log-in Panel

Just trying out a small log-in panel concept, with lots of animation. All links and buttons do something fun, unless otherwise indicated. (Update: added in some font icons, using data-icon attributes and FontAwesome.)

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>An Animated Log-in Panel</title>
  <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  
  <!-- Show menu when "logged in" -->
  <header class="app-controls">
    <nav class="main-menu">
      <ul>
        <li>
          <a href="#" data-icon="&#xf011;" data-tooltip="Nothing here: try the Log out link >">DNA</a>
        </li>
        <li>
          <a href="#" data-icon="&#xf01c;" data-tooltip="Nothing here: try the Log out link >">Tasks</a>
        </li>
        <li>
          <a href="#" data-icon="&#xf0e4;" data-tooltip="Nothing here: try the Log out link >">Dashboard</a>
        </li>
        <li>
          <a href="#" data-icon="&#xf15b;" data-tooltip="Nothing here: try the Log out link >">DocLab</a>
        </li>
        <li>
          <a href="#" data-icon="&#xf085;" data-tooltip="Nothing here: try the Log out link >">Workflow</a>
        </li>
        <li>
          <a href="#" data-icon="&#xf08b;" class="log-out">Log out</a>
        </li>
      </ul>
    </nav>
  </header>
  
  <!-- Reset Success message -->
  <div class="flex-centered success-msg">
    <h3>Thank you!</h3>
    <p>We have sent an email to the address that you submitted, with instructions on how to reset your password.</p>
    <p>Of course, if you have suddenly remembered your login details, you can <a href="#" class="reset-login-pane">try logging in again</a>.
  </div>
  <!-- End Reset Success Message -->
  
  <!-- Login Pane -->
  <div class="flex-centered login-pane">
    <!-- Front face (login) -->
    <div class="inner-wrap front-face">
      <h1>Login to DNA</h1>
      <form>
        <fieldset>
          <legend>Login to DNA</legend>
          <div class="row">
            <div class="form-group">
              <label for="username">Username:</label>
              <input type="text" id="username" name="username" placeholder="e.g. john.smith" />
            </div>
          </div>
          <div class="row">
            <div class="form-group">
              <label for="password">Password:</label>
              <input type="password" id="password" name="password" placeholder="At least 6 characters" />
            </div>
          </div>
        </fieldset>
        <div class="row">
          <div class="form-group">
            <button type="submit" class="submit-credentials" data-icon="&#xf090;">Login</button>
            <a href="#" class="forgot flip-pane">Forgot password?</a>
          </div>
        </div>
      </form>
    </div>
    <!-- Back face (reset) -->
    <div class="inner-wrap back-face">
      <h2>Reset my password</h2>
      <form>
        <div class="row">
          <div class="form-group">
            <p>Please submit the email address that you registered with, and we will send you a reset password link.</p>
          </div>
        </div>
        <fieldset>
          <legend>Email address</legend>
          <div class="row">
            <div class="form-group">
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" placeholder="e.g. john@smith.com" />
            </div>
          </div>
        </fieldset>
        <div class="row">
          <div class="form-group">
            <button type="submit" class="submit-email" data-icon="&#xf138;">Submit</button>
            <a href="#" class="flip-pane" data-icon="&#xf00d;">Cancel</a>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- End Login Pane -->
  
  <footer class="welcome-msg">
    <h1>Welcome to DNA</h1>
  </footer>
  
</div>
<!-- End container -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.fonticon,
[data-icon]:before {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-icon]:before {
  font-family: 'FontAwesome';
  content: attr(data-icon) " ";
  speak: none;
}
a {
  color: #1C3852;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.container {
  display: -webkit-flex;
  height: 100%;
  -webkit-transform: perspective(1800px);
          transform: perspective(1800px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  overflow: hidden;
}
.flex-centered {
  margin: auto;
}
.login-pane {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.4s ease-in;
  transition: -webkit-transform 0.4s ease-in;
  transition: transform 0.4s ease-in;
  transition: transform 0.4s ease-in, -webkit-transform 0.4s ease-in;
  position: relative;
}
.login-pane .inner-wrap {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.login-pane .inner-wrap.front-face {
  position: relative;
  z-index: 2;
}
.login-pane .inner-wrap.back-face {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: rotateX(180deg) translateZ(1px);
          transform: rotateX(180deg) translateZ(1px);
  z-index: 1;
  background: white;
}
.logged-in .login-pane {
  -webkit-transform: translateY(-2000px);
          transform: translateY(-2000px);
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: -webkit-transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
  transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
}
.flip .login-pane {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  -webkit-transition: -webkit-transform 0.5s linear;
  transition: -webkit-transform 0.5s linear;
  transition: transform 0.5s linear;
  transition: transform 0.5s linear, -webkit-transform 0.5s linear;
}
.zoom .login-pane {
  -webkit-transform: rotateX(180deg) translateX(1000px);
          transform: rotateX(180deg) translateX(1000px);
  -webkit-transition: -webkit-transform 0.3s ease-in;
  transition: -webkit-transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
}
.login-pane h1,
.login-pane h2 {
  font-size: 16px;
  margin: 0;
  padding: 0.6em 12px;
  background-image: -webkit-linear-gradient(#1C3852, #041627);
  background-image: linear-gradient(#1C3852, #041627);
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0 0 2px 0 rgba(255, 255, 255, 0.5);
  color: #eee;
  color: #295278;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7);
}
.login-pane form .row {
  background-image: -webkit-linear-gradient(#f4f4f4, #e4e4e4);
  background-image: linear-gradient(#f4f4f4, #e4e4e4);
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0 0 2px 0 rgba(255, 255, 255, 0.5);
  color: #eee;
}
.login-pane fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.login-pane legend {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  text-indent: -9999px;
}
.login-pane .form-group {
  padding: 0.4em 12px;
  display: table;
  font-size: 14px;
  color: #444444;
}
.login-pane label,
.login-pane input,
.login-pane button,
.login-pane a {
  display: table-cell;
}
.login-pane label {
  text-shadow: 0 1px 0px rgba(255, 255, 255, 0.8);
  display: inline-block;
  width: 75px;
}
.login-pane input {
  border-radius: 2px;
  border: 1px solid #bbb;
  padding: 0.4em;
}
.login-pane button[type="submit"] {
  display: block;
  width: 100px;
  border: 1px solid #000000;
  background-image: -webkit-linear-gradient(#1C3852, #041627);
  background-image: linear-gradient(#1C3852, #041627);
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0 0 2px 0 rgba(255, 255, 255, 0.5);
  color: #eee;
  padding: 0.4em 0;
  border-radius: 2px;
  margin: 0 1.2em 0 0;
}
.login-pane .flip-pane {
  font-size: 12px;
}
.login-pane p {
  margin: 0.4em 0;
  font-size: 12px;
}
.success-msg {
  position: absolute;
  top: -99999px;
  left: -99999px;
  opacity: 0;
  width: 300px;
  color: #8bb3d7;
  text-shadow: 0 1px 1px #041627;
}
.success-msg p {
  font-size: 14px;
  margin: 0.4em 0;
}
.success-msg a {
  color: #aac7e2;
  text-decoration: none;
  font-weight: bold;
}
.success-msg a:hover {
  text-decoration: underline;
}
.zoom .success-msg {
  position: static;
  opacity: 1;
  -webkit-transition: opacity 0.8s 0.4s ease-in;
  transition: opacity 0.8s 0.4s ease-in;
}
input:invalid {
  background: #eec0c4;
}
.app-controls {
  position: fixed;
  top: -200px;
  left: 0;
  right: 0;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
}
.logged-in .app-controls {
  top: 0;
  -webkit-transition: top 1s ease-in;
  transition: top 1s ease-in;
}
.main-menu ul {
  padding: 0.4em 0;
  margin: 0.4em 0.8em;
  list-style: none;
}
.main-menu ul li {
  width: 16.66666667%;
  float: left;
}
.main-menu ul li a {
  display: block;
  width: auto;
  text-align: center;
  position: relative;
  color: #366c9e;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.main-menu ul li a:hover {
  color: #6d9fcd;
  text-decoration: none;
  font-weight: bold;
}
.main-menu ul li a:not(.log-out) {
  /*&:before {
            content:"";
            border:8px solid transparent;
            border-bottom-color:black;
            bottom:-8px;
            margin-left:-8px;
          }*/
}
.main-menu ul li a:not(.log-out):after {
  position: absolute;
  left: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}
.main-menu ul li a:not(.log-out):after {
  content: attr(data-tooltip);
  width: 200px;
  margin-left: -100px;
  bottom: -29px;
  font-size: 11px;
  background: black;
  color: white;
  padding: 0.4em 0.8em;
  border-radius: 4px;
}
.main-menu ul li a:not(.log-out):hover:after {
  opacity: 0.6;
  -webkit-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}
.welcome-msg {
  position: absolute;
  left: 50%;
  top: 700%;
  color: #5782ad;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  opacity: 0;
  width: 400px;
  margin-left: -200px;
  text-align: center;
  -webkit-transition: top 0.4s ease-out;
  transition: top 0.4s ease-out;
  background-image: -webkit-linear-gradient(#1C3852, #041627);
  background-image: linear-gradient(#1C3852, #041627);
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0 0 2px 0 rgba(255, 255, 255, 0.5);
  color: #eee;
  color: transparent;
  -webkit-background-clip: text;
  box-shadow: none;
}
.welcome-msg h1 {
  margin: 0;
}
.logged-in .welcome-msg {
  top: 40%;
  opacity: 0.9;
  -webkit-transition: 0.4s ease-in;
  transition: 0.4s ease-in;
}
html {
  height: 100%;
}
body {
  height: 100%;
  position: relative;
  background-image: -webkit-radial-gradient(closest-side, #3C5C7B, #0F2437);
  background-image: radial-gradient(closest-side, #3C5C7B, #0F2437);
}
/* Downloaded from https://ahoj.co.uk/ */
/*$(function() {
  $('body').css('height',window.innerHeight);
});

$(window).resize(function() {
  $('body').css('height',window.innerHeight);
});*/

$('.submit-credentials').on('click', function(ev) {
  ev.preventDefault();
  $(this).closest('.container').toggleClass('logged-in');
});

$('.log-out').on('click', function(ev) {
  ev.preventDefault();
  $(this).closest('.container').removeClass('logged-in');
});

$('.flip-pane').on('click', function(ev) {
  ev.preventDefault();
  $(this).closest('.container').toggleClass('flip');
});

$('.submit-email').on('click', function(ev) {
  ev.preventDefault();
  $(this).closest('.container').addClass('zoom');
});

$('.reset-login-pane').on('click', function(ev) {
  ev.preventDefault();
 $(this).closest('.container').removeClass('zoom').removeClass('flip');
});

This awesome code is write by Chris Mounsey, you can se more from this user in the personal repository