Web Sitenize Kar Efekti Ekleme

bLastX · 24 Ara 2024

Sürekli bir kar efekti eklemek için JavaScript ve CSS ile dinamik bir animasyon yapabiliriz.

Bu tür bir efekt, sayfanın her yerinde kar tanelerinin sürekli olarak düşmesini sağlar. Aşağıda, kar tanelerinin sürekli bir şekilde dökülmesini sağlayacak bir örnek kod paylaşıyorum.

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sürekli Kar Efekti</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Kar tanelerinin yerleştirileceği alan -->
    <div class="snowflakes" aria-hidden="true"></div>

    <script src="script.js"></script>
</body>
</html>

CSS:

/* Genel stil ayarları */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background-color: #1a1a1a; /* Karanlık bir arka plan rengi */
    color: white;
    font-family: Arial, sans-serif;
    position: relative;
}

/* Kar tanelerinin yerleştirileceği container */
.snowflakes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* Kar tanelerine tıklanmasını engeller */
    z-index: 1000;
}

/* Kar tanelerinin stil ayarları */
.snowflake {
    position: absolute;
    top: -10px;
    font-size: 24px;
    color: white;
    user-select: none;
    opacity: 0.8;
    animation: fall linear infinite;
}

/* Kar tanelerinin düşme animasyonu */
@keyframes fall {
    0% {
        transform: translateY(-100px) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(calc(100px * var(--random-x)));
        opacity: 0.8;
    }
}

JavaScript:

// Kar tanelerinin animasyonunu dinamik yapmak için JavaScript kullanıyoruz
window.onload = function() {
    const snowflakesContainer = document.querySelector('.snowflakes');

    // Kar tanelerinin sayısını belirleyelim
    const numberOfSnowflakes = 100;  // Bu değeri arttırarak kar tanelerinin sayısını çoğaltabilirsiniz

    // Kar tanelerini oluşturmak
    for (let i = 0; i < numberOfSnowflakes; i++) {
        let snowflake = document.createElement('div');
        snowflake.classList.add('snowflake');
        
        // Her bir kar tanesinin pozisyonunu rastgele belirliyoruz
        snowflake.style.left = `${Math.random() * 100}vw`; // Ekranın tamamında rastgele pozisyon
        snowflake.style.animationDuration = `${Math.random() * 5 + 5}s`; // Farklı hızda düşmeler
        snowflake.style.animationDelay = `${Math.random() * 5}s`; // Farklı başlangıç zamanları
        
        // Rastgele yatay hareket için custom property (CSS değişkeni) ekliyoruz
        snowflake.style.setProperty('--random-x', Math.random() * 2 - 1); // -1 ile 1 arasında rastgele değer
        
        // Kar tanelerini container'a ekliyoruz
        snowflakesContainer.appendChild(snowflake);
    }
};

HTML, CSS ve JavaScript kodlarını bir dosyaya kaydedebilirsiniz (örneğin: index.html, styles.css, script.js).

Hikayeler

Web Sitenize Kar Efekti Ekleme

bLastX

www.blastx.work

Şu an konuyu görüntüleyenler (Toplam : 1, Üye: 0, Misafir: 1)

Benzer konular