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;
}