Inicio Blog arrow-menu-nigmacode Cursos Foro

Diseñando login animado - HTML, CSS & JS


Imagenes utilizadas:

Descargar imagenes: Download folder img

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC&display=swap" rel="stylesheet">
  <title>Animated login</title>
</head>
<body>
  <h1>ANIMATED LOGIN</h1>
  <div class="login">
    <img id="monster" src="img/idle/1.png" alt="">
    <div class="container-form">
      <form action="#">
          <label for="">email</label>
          <input autocomplete="off" onfocus="follow = false" onblur="follow = true" id="email" type="text" placeholder="name@email.com">
          <label for="">Password</label>
          <input onfocus="cover()" onblur="uncover()" type="password" placeholder="*********">
          <input type="submit" value="login">
      </form>
    </div>
  </div>
</body>
<script src="index.js" charset="utf-8"></script>
</html>

Código CSS

*{
  font-family: 'Bowlby One SC', cursive;
}
body{
  background-color: #421a4a;
}
h1{
  text-align:center;
  font-size:5rem;
  color:white;
}
.login{
  position: absolute;
  top:40%;
  left:50%;
  transform: translate(-50%, -50%);
}
.container-form{
  height: 200px;
  position: absolute;
  padding: 24px 60px 40px 60px;
  top: 300px;
  z-index: 1000;
  background-color: white;
  border: 5px solid #8F479D;
  border-radius: 10px;
}
label{
  margin-top: 0.5rem;
  margin-bottom:0.2rem;
  display: block;
}
input[type="text"], input[type="password"]{
  display:block;
  border:3px solid #8F479D;
  padding:6px 25px;
  border-radius:10px;
  font-size:1rem;
}
input[type="submit"]{
  width:100%;
  font-size:1rem;
  padding:0.5rem 0;
  margin-top:0.7rem;
  background-color:#8F479D;
  border:none;
  color:white;
  cursor:pointer;
}

Código JS

var monster = document.getElementById('monster');
var email = document.getElementById("email");
var follow = true;

var w = window.innerWidth / 2;
var h = window.innerHeight / 2;

followMouse();

email.oninput  = function(){
  num = email.value.length;
  switch (true) {
    case num >= 1 && num < 4:
      monster.src ="img/read/1.png"
      break;
    case num >= 4 && num < 14:
        monster.src ="img/read/2.png"
        break;
    case num >= 14:
        monster.src ="img/read/3.png"
        break;
  }
}

function followMouse(){
  document.onmousemove=function(mouse) {
    if(follow){
      if(mouse.clientX < w && mouse.clientY < h){
        monster.src ="img/idle/2.png"
      }else if(mouse.clientX < w && mouse.clientY > h){
        monster.src ="img/idle/3.png"
      }else if(mouse.clientX > w && mouse.clientY < h){
        monster.src ="img/idle/5.png"
      }else if(mouse.clientX > w && mouse.clientY > h){
        monster.src ="img/idle/4.png"
      }
    }
  }
}
function cover(){
  follow = false;
  var cont = 1;
  const convering = setInterval(function() {
    monster.src ="img/cover/"+cont+".png"
    cont < 8 ? cont++ : clearInterval(convering);

  }, 60);
}
function uncover(){
  var cont = 7;
  const uncovering = setInterval(function() {
    monster.src ="img/cover/"+cont+".png"
    cont > 1 ? cont-- : clearInterval(uncovering), follow = true;
  }, 60);
}

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!