Okudunuz mu?
İçindekiler
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!
Download “Yağmur Efekti”Yagmur_Efekti.zip – Downloaded 367 times – 3,35 KB
BSoylu
Debug ettikçe güzelleşen bir dünya için..
