WeatherFX

Canvas-based, performanslı yağmur & kar efekti plugin'i. Zero dependency, ~8KB.

---

Dosyalar

weather-fx.js    ← plugin (UMD, tarayıcı + Node/bundler uyumlu)
weather-fx.css   ← isteğe bağlı UI helper sınıfları
index.html       ← tam demo

---

Kullanım

1. Script tag ile

<link rel="stylesheet" href="weather-fx.css">
<script src="weather-fx.js"></script>

<script>
  const fx = new WeatherFX(document.body, {
    mode:       'rain',   // 'rain' | 'snow'
    count:      250,      // parçacık sayısı
    wind:       0.5,      // rüzgar (-3 … 3)
    speed:      14,       // düşüş hızı
    snowSize:   2.5,      // kar boyutu (snow modunda)
    fullscreen: true,     // true → viewport doldur
    zIndex:     '0',
  });
</script>

2. ES Module olarak

import WeatherFX from './weather-fx.js';

const fx = new WeatherFX('#hero-section', { mode: 'snow' });

3. Herhangi bir container'a

<div id="banner" style="width:800px; height:400px;"></div>

<script>
  const fx = new WeatherFX('#banner', {
    mode:  'rain',
    count: 120,
  });
</script>

---

API

Method	Açıklama
new WeatherFX(target, options)	Plugin'i başlatır. target: CSS selector veya DOM element
.setMode(mode)	'rain' veya 'snow' geçiş
.setOption(key, value)	Canlı ayar güncelle: count, wind, speed, snowSize
.pause()	Animasyonu durdur
.resume()	Animasyonu devam ettir
.clearGround()	Birikmiş karı temizle
.destroy()	Canvas'ı kaldır, listener'ları temizle

---

Options

Key	Type	Default	Açıklama
mode	string	'rain'	Başlangıç modu
count	number	250	Parçacık sayısı
wind	number	0.5	Rüzgar kuvveti (-3 … 3)
speed	number	14	Düşüş hızı
snowSize	number	2.5	Kar tanesi boyutu
fullscreen	boolean	false	true → fixed+viewport
zIndex	string	'0'	Canvas z-index

---

CSS Yardımcı Sınıfları

weather-fx.css dahil edilirse:

Sınıf	Açıklama
.wfx-rain	Koyu mavi gece arka planı (yağmur)
.wfx-snow	Soğuk lacivert arka plan (kar)
.wfx-controls	Hazır slider panel stili
.wfx-toggle / .wfx-toggle-btn	Mod geçiş butonu stili
.wfx-snow-only	Sadece kar modunda görünür

---

Tarayıcı Desteği

Canvas 2D API + requestAnimationFrame destekleyen her tarayıcı.
IE hariç tüm modern tarayıcılar ✓