Animiertes Smiley – die Augen folgen der Maus – Webdesign Idee (HTML & CSS & Javascript)

von | Nov 13, 2024 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript - Webdesign

Inhaltsverzeichnis

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

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert