Javascript ist eine Sprache die genial ist aber mich auch furchtbar aufregen kann. Sie ist aber auch eine Sprache mit der man Dinge im Web animieren kann und heute zeige ich euch wie man ein Objekt mit der Maus verknüpfen kann. So sieht es dann aus, als ob die Augen eines Smiley der Maus folgend würde.
Video
HTML
Hier wird das Gesicht mit HTML definiert.
1 2 3 4 5 6 | <div class="gesicht">
<div class="augen">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div> |
CSS
Jetzt designen wir das Gesicht und die Augen un die Pupillen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | .gesicht {
position: relative;
width: 300px;
height: 300px;
background: rgba(255, 255, 4, 0.968);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.gesicht::before {
content: "";
top: 180px;
position: absolute;
width: 150px;
height: 70px;
background: crimson;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
transition: 0.5s;
}
.augen {
position: relative;
top: -40px;
display: flex;
}
.augen .eye {
position: relative;
width: 80px;
height: 80px;
display: block;
background: rgb(209, 209, 209);
border-radius: 50%;
margin: 0 15px;
}
.augen .eye::before {
content: "";
position: absolute;
top: 50%;
left: 25px;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: black;
} |
Javascript
Und jetzt verknüpfen wir die Pupillen mit der Maus.
1 2 3 4 5 6 7 8 9 10 11 12 13 | document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
let eyes = document.querySelectorAll(".eye");
eyes.forEach((eye) => {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = `rotate(${rotate}deg)`;
});
} |
0 Kommentare