simple eye follow example

index.html

<h2> The allseeing eye needs your information before you can continue</h2>


<div class="container">
  <div class="eye">
  <div class="iris"></div>
</div>
  <input id="userName" placeholder="user name"/>
  <input id="pass" type="password" placeholder="password"/>
</div>

script.js

var iris = document.querySelector('.iris');
var eye = document.querySelector('.eye');
var userName = document.querySelector('#userName');
var pass = document.querySelector('#pass');
userName.addEventListener('keyup', e => {
  var pos = e.target.selectionStart;
  var iris = document.querySelector('.iris');
  iris.style.left = pos + 25 + "%";
})

userName.addEventListener("focus", function(e) {
  var pos = userName.value.length;
   iris.style.left = pos +25 + "%"; 
});

userName.addEventListener("blur", function() {
  iris.style.left = 35 + "%"; 
});

pass.addEventListener("focus", function() {
  eye.classList.add("secret");
});

pass.addEventListener("blur", function() {
  eye.classList.remove("secret");
});

simple-eye-follow-example.markdown

simple eye follow example

A Pen by l.marcelis on CodePen.

License.

style.css

body {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  background: #5AD;
  color: white;
}

.eye {
  width: 50px;
  height: 50px;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
  margin: 20px auto;
  transition: all 0.5s ease;
}
.eye.secret {
  height: 2px;
  margin-top:44px;
  margin-bottom:44px;
}

.eye.secret .iris {
  height: 2px;
}
.iris {
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 35%;
  transition: all 0.2s ease;
}
.container {
  margin: 0 auto;
  background: white;
  width: 250px;
  padding: 30px;
  border-radius: 4px;
}

input {
  display: block;
   margin: 10px auto;
  padding: 10px 5px;
  border-radius: 4px;
  border:1px solid #5AD;
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />