Laravel Siteye Kar Yağma Efekti Nasıl Ekleyebilirim?

03-11-2024, 14:32:53

Kurumsal PLUS

Merhaba, siteme sürekli olarak yağacak kar taneleri efekti eklemek istiyorum. Bu konuda yardımcı olabilecek bilgili abi, kardeşlerim varsa çok memnun olurum.

03-11-2024, 14:36:08

#2

QuantumPix

Raven adlı üyeden alıntı: mesajı görüntüle

Merhaba, siteme sürekli olarak yağacak kar taneleri efekti eklemek istiyorum. Bu konuda yardımcı olabilecek bilgili abi, kardeşlerim varsa çok memnun olurum.

Umarım işinize yarar hocam.

resources/views/layouts/app.blade.php dosyasına </body> etiketi öncesine şu satırları ekleyin

<link rel="stylesheet" href="{{ asset('css/snow.css') }}">
<script src="{{ asset('js/snowfall.js') }}"></script>

public/js/snowfall.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
    var flakes = [],
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        flakeCount = 100,
        mX = -100,
        mY = -100;

    document.body.appendChild(canvas);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < flakes.length; i++) {
            var flake = flakes[i];
            flake.y += flake.speed;
            if (flake.y > canvas.height) {
                flake.y = 0;
                flake.x = Math.random() * canvas.width;
            }
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(snow);
    }

    function init() {
        for (var i = 0; i < flakeCount; i++) {
            flakes.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 4 + 1,
                speed: Math.random() * 1 + 0.5
            });
        }
        snow();
    }

    window.addEventListener("resize", function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    init();
})();

public/css/snow.css

canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}

03-11-2024, 14:41:33

#3

vefali

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kar Yağışı Efekti</title>
<style>
/* Kar tanesi efekti için gerekli stil */
body {
margin: 0;
overflow: hidden;
background: #0c1b33;
color: white;
font-family: Arial, sans-serif;
}

.snowflake {
position: fixed;
top: -10px;
font-size: 1em;
color: white;
animation: fall linear infinite;
}

/* Kar tanelerinin boyutlarını ayarla */
@keyframes fall {
0% { transform: translateY(-10px) rotate(0deg); }
100% { transform: translateY(100vh) rotate(360deg); }
}
</style>
</head>
<body>


<div class="snowflake">❄</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❄</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>

<script>
// Kar tanesi oluşturma fonksiyonu
function createSnowflake() {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.textContent = "❄";

// Kar tanesinin ekranda rastgele bir konuma düşmesini sağla
snowflake.style.left = Math.random() * window.innerWidth + "px";
snowflake.style.animationDuration = (Math.random() * 3 + 2) + "s"; // 2-5 saniye arasında düşme süresi
snowflake.style.fontSize = (Math.random() * 10 + 10) + "px"; // 10-20px arasında boyut

document.body.appendChild(snowflake);

// Kar tanesi düştükten sonra sil
snowflake.addEventListener("animationend", () => {
snowflake.remove();
});
}

// Belirli aralıklarla kar tanesi oluştur
setInterval(createSnowflake, 100);
</script>
</body>
</html>