Şu sıralar ülkemizin birçok yerinde rüzgarlar hayatı zorlaştırmaktadır. Ben de öğrenciler hem üniversite sınavına hazırlansınlar hem de coğrafya dersleri için güzel bir uygulama olsun diye rüzgarların esme yönüne göre gerçekleşen bir animasyon uygulaması yapmak istedim.
Şimdi rüzgar isimlerine ve yönlerine bakalım.
Yıldız Kuzey
Karayel Kuzeybatı
Günbatısı Batı
Lodos Güneybatı
Kıble Güney
Keşişleme Güneydoğu
Gündoğusu Doğu
Poyraz Kuzeydoğu
Yeni bir web projesi oluşturalım. Projenin adını Cografya olarak belirleyelim. Projeye ruzgarlar.html isminde bir web sayfası ekleyelim. Web sayfasının uzantısı html olduğuna göre projemiz terminal tabanlı olacaktır. Öncelikle web sayfası için minimum gereksinimleri hazırlayalım.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mevsimleri Bulma Uygulaması</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
</body>
</html>
Öncelikle div etiketlerini kullanarak sayfanın tasarımını yapalım.
<div id="sahne">
<div id="ruzgarlar">
</div>
<div id="yonler">
<div id="baslik">
</div>
<div id="animasyon">
</div>
</div>
</div>
Şimdi sahne kutusunu ekranın ortasında yer almasını sağlayalım. Daha önceki animasyon uygulamalarında kutuyu ekranın ortasında tanımlamak için center() isminde bir metod tanımlamıştık. Bu metodun içinde yer aldığı js dosyasını sunucudan almak istiyorum. Bunun için animasyon.js dosyasını sunucuya atıp projeye ekleyelim.
<script src="https://www.maarificedid.com/uygulamalar/js/animasyon.js"></script>
Kutunun ortalanması için center() komutunu artık kullanabiliriz. Bunun için web sayfası açılır açılmaz kutunun oluşturulmasını istiyorum.
<script>
$(function () {
$('#sahne').center(700, 450);
});
</script>
Projeyi kaydedip çalıştıralım. Ekranın ortasında sahnemizin oluştuğunu görürsünüz. Şimdi ruzgarlar isimli kutuyu düzenleyelim.
#ruzgarlar{
width:20%;
height:100%;
background-color:red;
}
Sıra geidi yonler kutusunu oluşturmaya. Gerekli css kodlarını oluşturalım.
#yonler{
width:80%;
height:100%;
background-color:gray;
}
Projeyi kaydedip çalıştıralım. yonler kutusunun aşağıya indiğini görürsünüz. Bu sorunu çözmek için float özelliğinden yararlanıyoruz. Kodlarımızın son hali aşağıdaki gibi olacaktır.
#ruzgarlar{
width:20%;
height:100%;
background-color:red;
float:left;
}
#yonler{
width:80%;
height:100%;
background-color:gray;
float:right;
}
Şimdi yonler kutusunu 2 parçaya bölelim. Öncelikle baslik kutusunu ayarlayalım.
#baslik {
width: 100%;
height: 10%;
background-color: black;
}
Sıra geldi animasyon kutusunu ayarlamaya. Burada renk tanımlamasını sayıyla yaptığımıza dikkat edin.
#animasyon {
width: 100%;
height: 90%;
background-color: #dbd8d8;
}
Web sayfasının görünümünü ayarladık. Ruzgarlar kutusunda ruzgarların listelenmesini istiyorum. Öncelikle ruzgarlar isimli bir dizi oluşturup, dizinin elemanlarını girmemiz gerekiyor. Ancak burada şöyle bir sorun var. Rüzgarlarla birlikte rüzgarların yönünün de girilmesi gerekiyor. Dizimizi iki boyutlu olarak tanımlayıp değerlerini girmeliyiz.
var ruzgarlar = [["Yıldız", "Kuzeyden"],
["Karayel", "Kuzeybatıdan"],
["Günbatısı", "Batıdan"],
["Lodos", "Güneybatıdan"],
["Kıble", "Güneyden"],
["Keşişleme", "Güneydoğudan"],
["Gündoğusu", "Doğudan"],
["Poyraz", "Kuzeydoğudan"],
];
Bu dizi elemanlarını listbox içine aktarmamız gerekiyor. Öncelikle ruzgarlar kutusunun içinde Select liste kutusunu oluşturalım.
<select id="ddlRuzgar" size="9">
<option value="0">Rüzgarlar...</option>
</select>
Burada kullanılan size parametresine dikkat ediniz. Eğer size parametresini kullanmazsanız Select etiketi ComboBox olur. Size etiketini kullanırsanız select etiketi Listbox olur. Biz ayların tamamını listelemek istediğimiz için Listbox kullanacağız. ddlRuzgar nesnesinin css özelliklerini belirleyelim.
#ddlRuzgar {
width: 100%;
font-size: 16px;
height: 100%;
overflow: hidden;
padding: 5px;
}
Şimdi ruzgarlar dizisine ait elemanları ddlRuzgar etiketine aktaralım. Ben bu amaçla doldur() isminde metot tanımlayacağım.
$.fn.doldur = function () {
for (var i = 1; i <= 12; i++) {
var opt = new Option(ruzgarlar[i - 1][0], i);
$("#ddlRuzgar").append(opt);
}
}
Görüldüğü gibi kodlar daha basit hale gelmektedir. Tanımladığımız metodu web sayfası açılır açılmaz çağıralım. Ben burada $() fonksiyonunu kullanacağım.
$(function () {
$('#sahne').center(700, 450);
$('#ddlRuzgar').doldur();
});
Sıra geldi hangi rüzgarın seçildiğini bulma işlemine. Hatırlarsanız rüzgarların isimlerini Select Listbox etiketinin içinde göstermiştik. Peki Select etiketinde hangi elemanın seçildiğini nasıl bulacağız. Hangi olay bu işlemi gerçekleştirmektedir. OnChange(), bu etiket içinde bir eleman seçildiğinde tetiklenen olaydır. Bu metodu jquery kodlarıyla sayfa yüklenir yüklenmez tanımlayabiliriz.
$(function () {
$('#sahne').center(700, 450);
$('#ddlRuzgar').change(function () {
bul();
}).doldur();
});
Seçilen elemanın indis değerini bulalım.
function bul() {
var indis = $("#ddlRuzgar").val();
alert(indis);
}
Projeyi kaydedip çalıştıralım. Seçilen rüzgarın indis değerini görebiliriz artık. Dikkat ettiniz mi, Rüzgarlar... başlığını seçtiğimizde de indis değeri olarak 0 görüntülenmektedir. Halbuki böyle bir rüzgar olmamasına rağmen indis değerini bulması sakıncalı bir durumdur. Bu sorunu etiket tanımlarken selected disabled özelliğiyle çözelim.
<select id="ddlRuzgar" size="9" >
<option value="0" selected disabled>Rüzgarlar...</option>
</select>
Sıra geidi seçilen rüzgarın hangi yönden estiğini bulma işlemine. Hatırlarsanız rüzgar ismiyle birlikte hangi yönden estiğine dair bilgileri de dizi elemanlarıyla listelemiştik. Bu elemana ait indis değerini kullanarak seçilen rüzgarın hangi yönde estiğini bulabiliriz. Bu işlemi gerçekleştirmek için switch() deyimini kullanabiliriz. Öncelikle yıldız rüzgarının hangi yönde estiğini bulalım. Bu arada switch deyimi sadece tamsayılar üzerinde işlem yapmaktadır. Listbox içinde seçilen eleman "" içinde değer alır. Bu değeri sayısala dönüştürmeyi unutmayalım.
function bul() {
var indis = parseInt($("#ddlRuzgar").val());
switch (indis) {
case 1:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
}
}
Şimdi de Karayel isimli rüzgarın yönünü bulalım.
function bul() {
var indis = parseInt($("#ddlRuzgar").val());
switch (indis) {
case 1:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 2:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
}
}
Diğer rüzgarların yönünü bulma işlemini size bırakıyorum. Kodlarımızın son hali aşağıdaki gibi olacaktır.
function bul() {
var indis = parseInt($("#ddlRuzgar").val());
switch (indis) {
case 1:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 2:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 3:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 4:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 5:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 6:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 7:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 8:
alert(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
}
}
Tasarım kısmına geri dönelim. Üst satırda seçilen rüzgarın hangi yönden estiğini yazmamız gerekir. Bunun için baslik kutusunda mesaj isminde bir span eklemeliyiz.
<div id="baslik">
<span id="mesaj"></span>
</div>
Yukarıda verdiğimiz kodlarda alert() metodu ile yapılan işlemleri mesaj etiketinde yapacağız.
function bul() {
var indis = parseInt($("#ddlRuzgar").val());
switch (indis) {
case 1:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 2:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 3:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 4:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 5:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 6:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 7:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
case 8:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
break;
}
}
Projeyi kaydedip çalıştıralım. Rüzgarı seçmemize rağmen mesajın listelenmediğini görürsünüz. Çünkü mesaj değişkeninin text rengi siyahtır. Baslik kutusunun arkaplan rengi de siyah olduğu için görüntülenmez. Bu sorunu çözmek için mesaj etiketinin text rengini beyaz yapalım.
#mesaj {
color: white;
font-size: 20px;
}
Projeyi kaydedip çalıştıralım. Rüzgarı seçtiğimizde o rüzgarın hangi yönden estiğini görürsünüz. Dikkat ettiyseniz rüzgarın ismini ve yönünü dizi değişkeninden aldık. Verilen mesajın kutunun ortasında yer almasını sağlamak için baslik etiketinin css özelliklerini yeniden düzenleyelim.
#baslik {
width: 100%;
height: 10%;
background-color: black;
display:flex;
justify-content:center;
align-items:center;
}
İstersek listbox etiketinin text değerini de alıp kullanabiliriz.
var ruzgar = $("#ddlRuzgar option:selected").text();
Rüzgarların hangi yönden estiğini bulduğumuza göre, ilgili rüzgara ait resmin hangi yönden estiğini göstermek için animasyon kutusunda görüntülenmesine geldi sıra.. Öncelikle projemize images isminde bir klasör oluşturalım. Bu klasör içine ruzgarlar isminde bir resim ekleyelim. Bu resmi projede kullanmak için resimler isminde bir değişken oluşturup ilk değerini girelim.
var resimler = "images/ruzgarlar.jpg";
Biz burada aşağıdaki resmi kullanacağız.
Şimdi bu resmi animasyon kutusunda göstermek için animasyon metodunu oluşturalım.
var animasyon = function (res,zaman) {
}
Şimdi bu animasyona resim dosyasını ve zaman değerini gönderelim.
case 1:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
animasyon(resimler, 1000);
break;
Zaman değerini alert() metoduyla görüntüleyelim.
var animasyon = function (res,zaman) {
alert(zaman);
}
Böylece hem metodumuzun çalıştığını hem de metodu çağırma işleminin sorunsuz bir şekilde yapıldığını görürsünüz. Fonksiyona gönderilen resmin animasyon kutusunda gösterelim. Bunun için ismi resim olan bir img nesnesini buraya ekleyelim.
<div id="animasyon">
<img id="resim" src="" />
</div>
Resim dosyasında seçilen resmi görüntüleme işlemini animasyon metodunda gerçekleşitrelim.
var animasyon = function (res, zaman) {
$("#resim").attr("src", res);
}
Dikkat ettiyseniz resmimiz kutunun 0. satır, 0. sütun satırında görüntülenmektedir. Çünkü resmimiz animasyon kutusu içinda sabit tanımlıdır. Halbuki resmimize ait animasyonu bu kutu içinde gerçekelştirmeliyiz. Buna göre animasyon kutusunun positon özelliği relative, resim etiketinin position değeri absolute olmalıdır.
#animasyon {
width: 100%;
height: 90%;
background-color: #dbd8d8;
position:relative;
}
Şimdi animasyon metodunu düzenleyelim. Burada farklı yönlerden esen 8 farklı rüzgar yer almaktadır. Rüzgarların çıktığı yönlere göre animasyonlara ait parametrelerin değerlerini bulalım.
|
Adı
|
Yönü
|
top
|
left
|
width
|
height
|
|
Yıldız
|
Kuzey
|
0px
|
gen/2
|
0px
|
0px
|
|
Karayel
|
Kuzeybatı
|
0px
|
0px
|
0px
|
0px
|
|
Günbatısı
|
Batı
|
yuk/2
|
0px
|
0px
|
0px
|
|
Lodos
|
Güneybatı
|
yuk
|
0px
|
0px
|
0px
|
|
Kıble
|
Güney
|
yuk
|
gen/2
|
0px
|
0px
|
|
Keşişleme
|
Güneydoğu
|
yuk
|
gen
|
0px
|
0px
|
|
Gündoğusu
|
Doğu
|
yuk/2
|
gen
|
0px
|
0px
|
|
Poyraz
|
Kuzeydoğu
|
0px
|
gen
|
0px
|
0px
|
Tabloyu incelediğinizde width ve height değerlerinin değişmediğini görürsünüz. Burada değişen parametreler top ve left değerleridir. Tanımladığımız animasyona top ve left değerlerini parametre olarak verdiğimizde animasyonu oluşturabiliriz. Animasyonumuzu resim dosyası için global tanımlamak istiyorum. Daha önce bununla ilgili örnekler yapılmıştı. Tanımlanan animasyonumuzu center() metodu için tanımlanan harici dosyaya ekleyelim. Tanımladığımız animasyonun yapısı aşağıdaki gibi olacaktır.
// div : animasyonun oynayacağı kutu
// res : animasyona ait resim dosyası
// speed : animasyon zamanı
// n : animasyon çeşidi
$.fn.animasyon = function (div, res, speed, n) {
};
Yukarıda verilen animasyonumuzu artık kullanabiliriz. Ben sadece ismi Yıldız olan rüzgar için bu fonksiyonu çağıracağım. Siz diğerlerini gerçekleştiriniz.
case 1:
$('#mesaj').html(ruzgarlar[indis - 1][0] + " isimli rüzgar " + ruzgarlar[indis - 1][1] + " eser.")
$("#resim").animasyon($("#animasyon"), resimler, 1000, 1);
break;
Artık projemiz tamamlandı. Web sayfasını çalıştırdığımızda animasyonun güzel bir şekilde çalıştığını görürsünüz.