Lass es auf deiner Webseite auf Mausklick schneien – oder lass andere Objekte fallen

von | Mrz 18, 2024 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript

Inhaltsverzeichnis

Kleine Effekte auf einer Webseite können das Nutzererlebnis stark beeinflussen. Wenn man ZUVIEL davon einbaut – dann schreckt es ab – wenn man es aber in kleiner Dosis verwendet – kann es sehr lustig sein.

Heute möchte ich euch mal so einen kleinen Effekt zeigen. Mit diesem Effekt kann der User in eure Webseite rumklicken und überall dort wo er geklickt hat, wird ein Objekt erscheinen und dann runterfallen. So kann man dann dafür sorgen, dass es aussieht als ob es auf der Webseite schneit. Natürlich könnt ihr auch andere Objekte wie ein Osterei runterfallen lassen oder Blumen oder oder oder. Somit kann der user viel Spass haben

Video

Bild

Schneeflocke

HTML

1
<script src="app.js"></script>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.schnee {
    position: absolute;
    background-image: url(snowflake-image.svg);
    background-size: cover;
    border-radius: 50px;
    animation: fallen 2000ms linear infinite
}
 
@keyframes fallen {
    0% {
        transform: translate(50%, -50%);
        opacity: 1;
    }
 
    100% {
        transform: translate(50%, 1000%);
        opacity: 0;
    }
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.addEventListener("click", (e) =>{
    var schneeflocke = document.createElement("span");
    schneeflocke.classList.add("schnee");
 
    schneeflocke.style.left = e.offsetX + "px";
    schneeflocke.style.top = e.offsetY + "px";
 
    // nummer 20-100
    var size = Math.random() * 100;
 
    schneeflocke.style.width = size + "px";
    schneeflocke.style.height = size + "px";
    document.body.appendChild(schneeflocke);
 
    /* 
    setTimeout(() => {
        schneeflocke.remove();
    }, 1500);
    */
})

0 Kommentare

Einen Kommentar abschicken

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