Ojos Caramba

by CarambaMoreno

HTML

<div class="container">
  <div class="pestana pestana1"></div>
  <div class="pestana pestana2"></div>
  <div class="pestana pestana3"></div>
  <div class="pestana pestana4"></div>
  <div class="pestana pestana5"></div>
  <div class="ojo" id="ojo">
    <span class="pupila" id="pupila"></span>
  </div>
</div>
<div class="medida">
  <span></span>
  <span></span>
</div>

CSS

body{
  display: flex;
  justify-content: center;
}
.medida{
position: absolute;
left: 0;
bottom: 0;
}
.container{
  position: relative;
  align-self: center;/* 
  transform: translate3d(-50%, -50%, 0); */
  height: 5rem;
  width: 5rem;
}
.ojo{
  position: absolute;
  bottom: 0;
  left: 0;  /* transform: transalate3d(-80%, -30%, 0); */
  height: 100%;
  width: 100%;
  border: 5px solid black;
  border-radius: 50%;
  overflow: hidden;
}
.pupila{
  height: 1rem;
  width: 1rem;
  background: black;
  border-radius: 50%;
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  transform-origin: center center;/* top: 50%;
  left: 50%; */
}
.pestana{
  width: 0;
  border-left: 5px solid black;
  height: 1rem;
  background: black;
  position: absolute;
  display: none;
}
.pestana1 {
  transform: rotate(90deg);
  top: 50%;
  left: 3%;
}
.pestana2 {
  transform: rotate(-50deg);
  top: 15%;
  left: 15%;
}
.pestana3{ 
  top: 0;
  left: 50%;
}
.pestana4{ 
  transform: rotate(50deg);
  top: 15%;
  right: 14%;
}
.pestana5{ 
  transform: rotate(90deg);
  top: 50%;
  right: 2%;
}

JavaScript

$( document ).mousemove(function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var pageWidth = $(window).width();
  var pageHeight = $(window).height();
  var xPercent = Math.floor(event.pageX / pageWidth * 100);
  var yPercent = Math.floor(event.pageY / pageHeight * 100);
  var containerHeight = $('.container').outerHeight();
  var containerHeightPercentage = Math.floor( (containerHeight * 100 / pageHeight) / 2 );
  
  var containerOffsetY = Math.floor( $('.container').offset().top  / pageHeight * 100);
  var containerOffsetX = Math.floor( $('.container').offset().left  / pageWidth * 100);
  $( ".medida span:first-child" ).text( "( event.pageX, event.pageY ) : " + pageCoords + " / page width:" + xPercent + " / offset x: " + containerOffsetX + " / offset y: " + containerOffsetY + " / container height: " + containerHeight +" / cont height percentage: "+ containerHeightPercentage);
  var styles = {
      left : xPercent + "%",
      top: yPercent + containerHeightPercentage + "%"
    };
  $('.pupila').css(styles);
});