Sie sind nicht angemeldet.

Fareyi Takip Eden ve Sallanan Kalpli Kuyruk Efekti

Lieber Besucher, herzlich willkommen bei: AllaTurkaa. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Dilber

Schüler

  • »Dilber« ist weiblich
  • »Dilber« ist der Autor dieses Themas

Beiträge: 164

Registrierungsdatum: 10. September 2022

Wohnort: FRANCE

  • 1002
  • Nachricht senden

1

Montag, 2. Juni 2025, 01:04

Fareyi Takip Eden ve Sallanan Kalpli Kuyruk Efekti

seçenek 1 ???? Ne Yapıyor? ✔️ Fare hareket ettikçe "❤️" efekti oluşturur ✔️ Kalpler 1.5 saniye sonra kaybolur ✔️ CSS animasyonu ile kalpler büyüyerek yok olur

Cascading Style Sheet

 
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

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener("mousemove", function (e) {
        let heart = document.createElement("div");
        heart.innerHTML = "❤️";
        heart.style.position = "absolute";
        heart.style.left = `${e.pageX}px`;
        heart.style.top = `${e.pageY}px`;
        heart.style.fontSize = "16px";
        heart.style.color = "red";
        heart.style.pointerEvents = "none";
        heart.style.animation = "fadeOut 1.5s ease-out";

        document.body.appendChild(heart);

        setTimeout(() => {
            heart.remove();
        }, 1500);
    });
});


const style = document.createElement("style");
style.innerHTML = `
    @keyframes fadeOut {
        0% { opacity: 5; transform: scale(1); }
        100% { opacity: 0; transform: scale(1.5); }
    }
`;
document.head.appendChild(style);
</script>
seçenek 2 ???? Fare hareket edince: kalpler oluşturuyor, ???? Fare durunca: kalpler rastgele yönlere dağılıyor ve yavaş yavaş kayboluyor.

Cascading Style Sheet

 
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
52
53
54
55
56
57
58

<canvas id="heartCanvas"></canvas>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const canvas = document.getElementById("heartCanvas");
    const ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.position = "fixed";
    canvas.style.top = "0";
    canvas.style.left = "0";
    canvas.style.pointerEvents = "none"; 
    let hearts = [];
    function Heart(x, y, size, speedX, speedY) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.speedX = speedX;
        this.speedY = speedY;
        this.opacity = 1;
    }

    Heart.prototype.update = function () {
        this.x += this.speedX;
        this.y += this.speedY;
        this.opacity -= 0.02;

    };

    Heart.prototype.draw = function () {
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = "red";
        ctx.font = `${this.size}px Arial`;
        ctx.fillText("❤️", this.x, this.y);
        ctx.globalAlpha = 1;
    };

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        hearts.forEach((heart, index) => {
            heart.update();
            heart.draw();
            if (heart.opacity <= 0) {
                hearts.splice(index, 1);
            }
        });
        requestAnimationFrame(animate);
    }
    document.addEventListener("mousemove", function (e) {
        let size = Math.random() * 10 + 15;
        let speedX = (Math.random() - 0.5) * 2;
        let speedY = (Math.random() - 0.5) * 2;
        hearts.push(new Heart(e.clientX, e.clientY, size, speedX, speedY));
    });

    animate();
});
</script>

Ähnliche Themen