Bu dersimiz de
html5 ile yağmur efekti vermeyi göreceğiz.Bunun için
rainyday.js yi kullanacağız.Yağmur efektini seçtiğimiz bir resimin üzerine uyguluyoruz.Örneği incelerseniz daha iyi anlarsanız.
İncele : http://ustaderslik.com/ornek/html5-yagmur/
İndir : http://ustaderslik.com/dosya/html5-yagmur.rar
Öncelikle js yi ekleyip ardından sayfaya bir
img tagı ekliyoruz.Daha sonra temel bir kalıbımız var,bu kalıp ile plugini uyguluyoruz.
script type="text/javascript">
function yagmur() {
var resim = document.getElementById("alan-1");
resim.onload = function() {
var efekt = new RainyDay({
image:this,
blur:20
});
efekt.rain([ [1, 5, 1] ], 10);
};
resim.crossOrigin="anonymous";
resim.src="resim.jpg";
}
yagmur();
</script>
Kodları açıklayacak olursak.Alanı seçip ardından resim adresini belirtiyoruz.efekt.
rain([ [1, 5, 1] ], 10); kısmında ise ayar yapıyoruz.İlk alan yagmur damlasının
minimum küçüklüğü.İkincisi
maxsimum büyüklüğü.Yağmur
damla miktarı.En sondaki ise milisaniye cinsinden
süresidir.1000 yazarsak,her saniye 1 damla oluşur.Blur kısmından ise
bulanıklığı değiştirebilirsiniz veya
0 vererek kaldırabiliriz.
Parametreler ile oynarak istediğiniz şekil de ayarlayabilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="rainyday.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{height:100%;}
.alan{width:100%;height:100%;float:left;}
</style>
</head>
<body>
<img src="" class="alan" id="alan-1" />
<script type="text/javascript">
function yagmur() {
var resim = document.getElementById("alan-1");
resim.onload = function() {
var efekt = new RainyDay({
image:this,
blur:20
});
efekt.rain([ [1, 5, 1] ], 10);
};
resim.crossOrigin="anonymous";
resim.src="resim.jpg";
}
yagmur();
</script>
</body>
</html>
Görüntüsü :
UstaDerslik
