👋🏽Hola, hoy quiero enseñarte a hacer que un “div” se mueva dando la apariencia de seguir a tu cursor 🐭. Usaremos HTML, CSS y JS.
MUESTRA DE TODO EL CÓDIGO:
Comenzamos por el HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EYES👀</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="face">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Como ves tengo un “div” con la clase face este servirá para el rostro del emoji.
Dentro de ese, tenemos el elemento “div” con la clase_eyes_ y este servirá como contenedor para los ojos.
Finalmente tenemos dos elementos “div” con la clase_eye_ que serán los ojos en si mismos.
**Vayamos por el CSS: **
/*Ese asterisco como ya sabras es el selector universal y aqui no esta permitiendo realizar un reinicio de estilo y quitar todo margen predeterminado por el navegador, ya que podría afectar nuestro diseño*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*Al body le decimos que todos sus hijos directos se mostraran como flex, además los centramos respecto al tamaño total de la pantalla. Finalmente le ponemos un color de fondo oscuro*/
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3c403f;
}
/*Ahora pasamos al elemento con la clase "face", este será el rostro de nuestro emoji, yo decidí colocarle un rostro de color morado. Fíjate que le doy un position como relative y esto me sirve para que los elementos en su interior que yo decida poner como absolute tenga como espacio de movimiento solo a este elemento.
Le ponemos un ancho y un alto de 300 pixeles.
Y como será una especie de rostro de emoji y estos son redonditos le ponemos un border-radius de 50%.
Luego le decimos que todos sus hijos inmediatos se mostraran en flex.
Y volvemos a centrar tanto horizontal como verticalmente*/
.face{
background-color: #ad47f6;
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/*Fijate que en el HTML no pusimos un div para la boca, pero el emoji que te mostre al inicio si tiene una.
Para tener esa boca usaremos el pseudoelemento before que nos permite agregar contenido antes del div face.
Le establecemos un tamaño.
Y le damos una posicion de absolute que permite que este elemento lo podamos mover con referencia al div face (recuerda por eso le pusimos relative) y se quede fijo allí. Ese top es para dar ese movimiento.
Ese transition es para que la animation que pondremos en el hover tome un tiempo y se vea más natural*/
.face::before{
content: "";
background: #ebe0ca;
width: 150px;
height: 70px;
position: absolute;
top: 180px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
transition: 0.5s;
}
/*Aqui aplicamos lo que te decia del hover, aqui queremos que la boca cambie de forma si el mouse esta encima del div*/
.face:hover::before{
top: 210px;
background: #ebe0ca;
height: 20px;
border-radius: 70px 70px 10px 10px;
}
/*Aqui hacemos que el contenedor de los ojos, el div eyes, tenga una posicion relative y le decimos todos tus hijos inmediatos se mostraran flex.*/
.eyes{
position: relative;
top: -40px;
display: flex;
}
/*
Aqui aplicamos estilos a los div eye que son los ojos en si mismo (la parte blanquita del ojo).
Le damos un color blanco, un ancho y un alto, una posicion relative y como debe ser redondo un border radius de 50% y un margin vertical de 15px
*/
.eyes .eye{
background: #fff;
width: 80px;
height: 80px;
position: relative;
border-radius: 50%;
margin: 0 15px;
}
/* Y este código es solo para el iris del ojo (la parte negrita de nuestro ojo -salvo si eres ojiazul u otro color- 👁️) */
.eyes .eye::before{
content: "";
background: #333;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
border-radius: 50%;
left: 25px;
transform: translate(-50%,-50%);
}
Ahora pasemos al JS:
document.querySelector("body").addEventListener('mousemove',eyeball);
function eyeball(event){
let eye = document.querySelectorAll(".eye");
eye.forEach(function(eye){
//El método getBoundingClienteRect retorna el left, top, right
//bottom, x (left), y(top), width y height del
//rectangulo más pequeño que contiene por completo al elemento
//Get the coordenate of the center of the eye
let x = eye.getBoundingClientRect().left + eye.clientWidth/2;
let y = eye.getBoundingClientRect().top + eye.clientHeight/2;
//Calculamos el ángulo (en radianes) entre el ratón y el centro del ojo.
//event.pageX y event.pageY representan la coordenada del raton
//La funcion Math.atan2(y,x) devuelve el angulo cuya tangente es el
//cociente y/x
let radian = Math.atan2(event.pageX - x, event.pageY - y);
// Conviertimos el ángulo de radianes a grados y ajustamos la rotación
//Ese -1 es para invertir la direccion de rotacion esto es para que la rotacion siga el movimiento del raton de manera coherente con la posicion del ojo
//Ese +270 es un ajuste adicional para asegurar que los ojos esten la posicion adecuada y esto se hizo por la orientacion que tienen los ojos
let rot = radian*(180/Math.PI)*-1+270;
eye.style.transform = "rotate("+rot+"deg)";
}
);
}
Espero te sirva, la verdad que lo hice apurado porque me gana la hora 😐😐. Y necesito hacer mi tarea de la U, pero no quería irme sin antes hacer este reto. Si tienes alguna duda, no dudes 🤣🤣🤣 en escribirme.
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
