Giriş yapmadınız.

Fareyi Takip Eden ve Sallanan Kalpli Kuyruk Efekti

Sayın ziyaretçi, AllaTurkaa sitesine hoş geldiniz. Eğer buraya ilk ziyaretiniz ise lütfen yardım bölümünü okuyunuz. Böylece bu sitenin nasıl çalıştığı konusunda ayrıntılı bilgilere ulaşabilirsiniz. Eğer sitenin tüm olanaklarından faydalanmak istiyorsanız, kayıt yaptırmayı düşünmelisiniz. Bunun için kayıt formunu kullanabilir ya da bu bağlantıya giderek kayıt işlemi hakkında daha fazla bilgi alabilirsiniz. Eğer önceden kayıt yaptırdıysanız buradan giriş yapabilirsiniz.

Dilber

Stajyer

  • "Dilber" bir kadın
  • Konuyu başlatan "Dilber"

Mesajlar: 61

Kayıt tarihi: Sep 10th 2022

Konum: FRANCE

  • Özel mesaj gönder

1

Monday, 2.06.2025, 00: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>

Benzer konular