AniJS demo final

Tutorials of (Anijs demo final) by Sitepoint

<!DOCTYPE html>
<html >
<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/ */
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/ */
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();
  }
}

This awesome code ( AniJS demo final ) is write by SitePoint, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © SitePoint