AniJS demo final

In this example below you will see how to do a AniJS demo final with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SitePoint, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SitePoint ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>AniJS demo final</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/animatecss/3.1.0/animate.css'>

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

  
</head>

<body>

  <div class="container">
  
  <div id="divLogin" class="login_screen">
    <h2 id="spnLogin">Sign In</h2>
    <input id="txtLoginId" type="text" placeholder="Email Id" />
    <input id="txtLoginPass" type="password" placeholder="Password" />
    <a href="#" class="btn" data-anijs="if: click, do: hinge animated, to: .login_screen, before: validateLogin">
      SignIn
    </a>
    <a href="#" class="signup-link" data-anijs="if: click, do: rollIn animated, to: .reg_screen,before: showReg">Register?</a>
  </div><!-- .login-screen -->

  <div id="divReg" class="reg_screen" style="display: none">
    <h2 id="spnLogin">Register</h2>
    <input id="txtName" type="text" placeholder="Name" />
    <input id="txtEmail" type="text" placeholder="Email Id" />
    <input id="txtPassword" type="password" placeholder="Password" />
    <h2 id="spnStatus"></h2>
    <a href="#" class="btn" data-anijs="if: click, do: pulse animated, to: .reg_screen, before: validate">
      SignUp
    </a>
    <a href="#" class="signup-link" data-anijs="if: click, do: rollIn animated, to: .login_screen, before: showLogin">Login ?</a>
  </div><!-- .reg_screen -->

</div><!-- .container -->

<p>Demo by Jay Raj. <a href="#">See article</a>.</p>
  <script src='http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/SitePoint/anijs-demo-final-aAxgq */
body {
	font-family: Arial;
	background-color: #ffffff;
	padding: 20px;
}

h2 {
  margin: 0 0 .6em 0;
}

input {
  text-align: center;
  background-color: #;
  border: 2px solid transparent;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 200;
  padding: 10px 0;
  width: 250px;
  margin-bottom: 5px;
}

input:focus {
	border: 2px solid #3498DB;
	box-shadow: none;
}

.container {
	margin: 20px auto 100px auto;
	width: 300px;
}

.login_screen {
	background-color: #46AE52;
	padding: 20px;
	border-radius: 5px;
  text-align:center;
}

.reg_screen {
	background-color: #46AE52;
	padding: 20px;
	border-radius: 5px;
  text-align:center;
}

.btn {
	border: 2px solid transparent;
	background: #3498DB;
	color: #ffffff;
	font-size: 16px;
	line-height: 25px;
	padding: 10px 0;
	text-decoration: none;
	text-shadow: none;
	border-radius: 3px;
	box-shadow: none;
	display: block;
	width: 150px;
	margin: 10px auto;
  text-align:center;
}

.signup-link {
	font-size: 12px;
	color: #444;
	display: block;
	margin-top: 12px;
}

p {
  text-align: center;
}

/*Downloaded from https://www.codeseek.co/SitePoint/anijs-demo-final-aAxgq */
var animationHelper = AniJS.getHelper(),
    spnLogin = document.getElementById('spnLogin');

animationHelper.validateLogin = function (e, animationContext) {
  var email = document.getElementById('txtLoginId').value;
  var pass = document.getElementById('txtLoginPass').value;
  if (email && pass) {
    spnLogin.innerHTML = 'Processing...';
  } else {
    spnLogin.innerHTML = 'Fill Required fields.';
    animationContext.run();
  }

}

animationHelper.showReg = function (e, animationContext) {
  document.getElementById('divLogin').style.display = 'none';
  document.getElementById('divReg').style.display = 'block';
  animationContext.run();
}

animationHelper.showLogin = function (e, animationContext) {
  document.getElementById('divReg').style.display = 'none';
  document.getElementById('divLogin').style.display = 'block';
  animationContext.run();
}

animationHelper.validate = function (e, animationContext) {
  var name = document.getElementById('txtName').value;
  var regEmail = document.getElementById('txtEmail').value;
  var regPass = document.getElementById('txtPassword').value;
  if (name && regEmail && regPass) {
    document.getElementById('spnStatus').innerHTML = 'Processing...';
    setTimeout(function () {
      document.getElementById('spnStatus').innerHTML = '';
    }, 2000);
  } else {
    document.getElementById('spnStatus').innerHTML = 'Fill required fields';
    animationContext.run();
  }
}

Comments