You are not logged in.

Fareyi Takip Eden ve Sallanan Kalpli Kuyruk Efekti

Dear visitor, welcome to AllaTurkaa. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Dilber

Trainee

  • "Dilber" is female
  • "Dilber" started this thread

Posts: 157

Date of registration: Sep 10th 2022

Location: FRANCE

  • 1002
  • Send private message

1

Monday, June 2nd 2025, 1:04am

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>

Similar threads