CSS ile Yağmur Yağdırma Efekti Nasıl Yapılır?

Bu makalede, CSS ile yağmur yağdırma efekti oluşturmanın adımları anlatılmaktadır. HTML, CSS ve JavaScript kullanarak, rastgele yerleştirilen yağmur damlalarının ekranda düşmesini sağlayan bir animasyon yaratılır. Yağmur efekti, web sayfalarında atmosferik bir hava oluşturur ve kullanıcı deneyimini zenginleştirir.

BSoylu

5 ay önce

CSS ile Yağmur Yağdırma Efekti Nasıl Yapılır?

İçindekiler

CSS ile Yağmur Yağdırma Efekti Nasıl Oluşturulur?

Merhaba arkadaşlar, bu yazımızda CSS ile yağmur yağdırma efektini nasıl oluşturabileceğimizi adım adım anlatacağım. İnternet dünyasında görsel efektler, kullanıcı deneyimini artırmak için önemli bir rol oynar. Birçok web tasarımcısı, sitelerinde farklı görsel efektler kullanarak daha etkileşimli ve dikkat çekici bir deneyim sunar. Bunlardan biri de CSS ile yağmur yağdırma efektidir. Bu yazıda, bu efekti nasıl yaratacağınızı ve hangi teknikleri kullanmanız gerektiğini öğreneceksiniz.

CSS ile Yağmur Yağdırma Efekti Nasıl Oluşturulur?

Yağmur yağdırma efekti, web sayfalarına doğal bir atmosfer katmak için kullanılan harika bir tekniktir. CSS (Cascading Style Sheets) kullanarak, bu efekti kolayca yaratabiliriz. Birçok web sayfasında, özellikle şablonlar ve animasyonlarda kullanılan bu efekt, HTML ve CSS ile oldukça basit bir şekilde yapılabilir.

Öncelikle, yağmur damlalarını simüle etmek için HTML ve CSS kodlarını birlikte kullanacağız. Yağmur damlaları, genellikle belirli bir hızla düşen küçük kareler veya dikdörtgenler olarak tasvir edilir. Bu damlaların hızını, düşüş mesafelerini ve sayısını CSS ile ayarlayabiliriz.

Adım 1: HTML Yapısı

İlk olarak, bir HTML dosyası oluşturuyoruz. HTML yapısında, yağmur damlalarının yer alacağı bir konteyner (div) oluşturacağız. İşte örnek bir HTML yapısı:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS ile Yağmur Yağdırma</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="rain"></div>
</body>
</html>

Adım 2: CSS ile Yağmur Efekti

Şimdi yağmur damlalarını simüle etmek için CSS yazalım. Damlaların yere düşme hareketi için animation özelliğinden yararlanacağız. Ayrıca, damlaların görünümünü ve hızını ayarlamak için @keyframes kullanacağız. İşte CSS kodu:

body {
    background-color: #2f2f2f;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.drop {
    position: absolute;
    top: -10px;
    width: 2px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    animation: fall 1.5s linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

Adım 3: Damlaların Rastgele Pozisyon ve Hızda Oluşması

Şimdi damlaların daha gerçekçi görünmesi için rastgele pozisyonlar ve hızlar atayacağız. Bunun için setInterval fonksiyonunu kullanarak her bir damla için rastgele konumlar ve animasyon süreleri belirleyeceğiz. Aşağıdaki JavaScript kodu ile bunu gerçekleştirebiliriz:

const rainContainer = document.querySelector('.rain');

function createRaindrop() {
    const drop = document.createElement('div');
    drop.classList.add('drop');
    drop.style.left = `${Math.random() * 100}vw`;
    drop.style.animationDuration = `${Math.random() * 2 + 1}s`;
    rainContainer.appendChild(drop);

    // Damlayı 3 saniye sonra sil
    setTimeout(() => {
        drop.remove();
    }, 3000);
}

// Yağmur damlalarını her 100ms'de bir oluştur
setInterval(createRaindrop, 100);

Adım 4: Sonuç

CSS ile yağmur yağdırma efektini başarılı bir şekilde oluşturduk. Yağmur damlaları, sayfa üzerinde rastgele konumlanarak düşer ve sürekli olarak yenilenir. Bu efekt, web sayfanıza şıklık katacak ve kullanıcılarınıza hoş bir atmosfer yaratacaktır.

Bir sonraki yazımızda görüşmek üzere!

İndir “Yağmur Efekti” Yagmur_Efekti.zip – 42 defa indirildi – 3,35 KB

Yorumlar

Henüz yorum yapılmadı, ilk yorumu sen yapmak ister misin?