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> |
<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;
}
} |
.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);
*/
}) |
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