|
Web sayfalarının olmazsa olmazı olan animasyonlar jquery kütüphanesiyle çok kolay yapılmaktadır. Jquery animasyonlar için animate() metodunu programcıların hizmetine sunmuştur. Bu uygulamamızda öncelikle tüm ayları bir listbox içinde listeleyeceğiz. Bu liste içinde seçilen ayın hangi mevsime ait olduğunu bulacağız. Daha sonra o mevsime ait resmi sol taraftan itibaren div içinde görüntüleyeceğiz.
Bu uygulama ile neler öğreneceğiz.
jquery ile dizi tanımlama işlemini yapma
Ekranın ortasında yan yana iki divi tanımlama
Dizi elemanlarını listbox içine aktarma
Listbox içinde bir elemanı seçip tıklama
Seçilen elemanın hangi mevsime ait olduğunu bulma
Mevsime ait resmi yükleme
Yüklenen resme animasyon uygulama
Animasyonu sürekli tekrarlama
Yeni bir web projesi oluşturalım. Projenin adını Mevsimler olarak belirleyelim. Projeye animasyon.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.
Verilen tasarıma göre div etiketlerini oluşturalım.
<div id="sahne">
<div id="aylar">
</div>
<div id="mevsimler">
<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 aylar isimli kutuyu düzenleyelim.
#aylar{
width:20%;
height:100%;
background-color:red;
}
Sıra geidi mevsimler kutusunu oluşturmaya. Gerekli css kodlarını oluşturalım.
#mevsimler{
width:80%;
height:100%;
background-color:gray;
}
Projeyi kaydedip çalıştıralım. mevsimler 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.
#aylar{
width:20%;
height:100%;
background-color:red;
float:left;
}
#mevsimler{
width:80%;
height:100%;
background-color:gray;
float:right;
}
Şimdi mevsimler 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. Aylar kutusunda ayların listelenmesini istiyorum. Öncelikle aylar isimli bir dizi oluşturup, dizinin elemanlarını girmemiz gerekiyor.
var aylar = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
Bu dizi elemanlarını listbox içine aktarmamız gerekiyor. Öncelikle aylar kutusunun içinde Select liste kutusunu oluşturalım.
<select id="ddlAy" size="13">
<option value="0">Ay Seçiniz...</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. Şimdi aylar dizisine ait elemanları ddlAy etiketine aktaralım. Ben bu amaçla doldur() isminde metot tanımlayacağım. Aşağıdaki kodlar select etiketine elemanları javascript ile doldurmaktadır.
function doldur() {
var obj = document.getElementById("ddlAy");
for (var i = 1; i <= 12; i++) {
opt = document.createElement("option");
opt.value = i;
opt.text = aylar[i - 1];
obj.appendChild(opt);
}
document.getElementById("ddlAy").value = 0;
}
Şimdi aynı metodu jquery ile tanımlayalım.
$.fn.doldur = function () {
for (var i = 1; i <= 12; i++) {
var opt = new Option(aylar[i-1], i);
$("#ddlAy").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. Bilindiği gibi terminal tabanlı bir web sayfasında ilk çalışacak metodu kullanmanın 4 yolu vardır. Bunların ikisi javascript, diğer ikisi ise jquery metodlarıdır.
Javascript olanlar
<body onload="start()">
window.onload("start()");
Jquery olanlar ise;
$(document).ready()
$()
Ben burada $() fonksiyonunu kullanacağım.
$(function () {
$('#sahne').center(700, 450);
$('#ddlAy').doldur();
});
Sıra geldi hangi ayın seçildiğini bulma işlemine. Hatırlarsanız ayları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 etiket içinde iki türlü kullanabiliriz. Öncelikle javascript özelliğini kullanalım.
<select id="ddlAy" size="12" onchange="bul()" >
<option value="0">Ay Seçiniz...</option>
</select>
Ya da bu metodu jquery kodlarıyla sayfa yüklenir yüklenmez tanımlayabiliriz.
$(function () {
$('#sahne').center(700, 450);
$('#ddlAy').doldur();
$('#ddlAy').change(function () {
bul();
});
});
Seçilen elemanın indis değerini bulalım. Seçilen elemanı javascript ve jquery kodlarıyla bulmaya çalışalım. Javascipt ile bulduğumuz değeri görüntüleyelim.
function bul() {
var eleman = document.getElementById("ddlAy");
var indis = eleman.options[eleman.selectedIndex].value;
alert(indis);
}
Şimdi de aynı işlemi jquery ile gerçekleştirelim.
function bul() {
var indis = $("#ddlAy").val();
alert(indis);
}
Projeyi kaydedip çalıştıralım. Seçilen ayın indis değerini görebiliriz artık. Dikkat ettiniz mi, Ay Seçiniz... başlığını seçtiğimizde de indis değeri olarak 0 görüntülenmektedir. Halbuki böyle bir ay olmamasına rağmen indis değerini bulması sakıncalı bir durumdur. Bu sorunu çözmenin iki yolu vardır. Kullanıcının bu seçeneği seçmesini engelleyebiliriz.
<select id="ddlAy" size="13" >
<option value="0" selected disabled>Ay Seçiniz...</option>
</select>
Ya da kod aşamasında bu seçeneğin işlem yapmasını engelleyebiliriz.
function bul() {
var indis = $("#ddlAy").val();
if (indis == "0") {
return;
}
alert(indis);
}
Sıra geidi seçilen ayın hangi mevsime denk geldiğini bulma işlemine. Bu işlemi gerçekleştirmek için if karar kontrol deyimini ya da switch() deyimini kullanabiliriz. Öncelikle ilkbahar mevsaimine ait kodları yazalım.
function bul() {
var indis = parseInt($("#ddlAy").val()); // Number()
if (indis == 0) {
return;
}
if (indis == 3 || indis == 4 || indis == 5) {
alert("İlkbahar");
}
}
Aynı işlemi switch() deyimiyle yapalım.
function bul() {
var indis = parseInt($("#ddlAy").val()); // Number()
switch (indis) {
case 0:
return;
break;
case 3:
case 4:
case 5:
alert("ilkbahar");
break;
}
}
Şimdi de yaz mevsimine ait kodları yazalım.
function bul() {
var indis = parseInt($("#ddlAy").val()); // Number()
if (indis == 0) {
return;
}
if (indis == 3 || indis == 4 || indis == 5) {
alert("İlkbahar");
} else if (indis == 6 || indis == 7 || indis == 8) {
alert("Yaz");
}
}
Diğer mevsimleri bulma işlemini size bırakıyorum. Kodlarımızın son hali aşağıdaki gibi olacaktır.
function bul() {
var indis = parseInt($("#ddlAy").val()); // Number()
if (indis == 0) {
return;
}
if (indis == 3 || indis == 4 || indis == 5) {
alert("İlkbahar");
} else if (indis == 6 || indis == 7 || indis == 8) {
alert("Yaz");
} else if (indis == 9 || indis == 10 || indis == 11) {
alert("Sonbahar");
} else {
alert("Kış");
}
}
Tasarım kısmına geri dönelim. Üst satırda seçilen ayın hangi mevsime ait olduğunu 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($("#ddlAy").val()); // Number()
if (indis == 0) {
return;
}
if (indis == 3 || indis == 4 || indis == 5) {
$("#mesaj").html(aylar[indis - 1]+" ayı İlkbahar mevsimine aittir.")
} else if (indis == 6 || indis == 7 || indis == 8) {
$("#mesaj").html(aylar[indis - 1] + " ayı Yaz mevsimine aittir.")
} else if (indis == 9 || indis == 10 || indis == 11) {
$("#mesaj").html(aylar[indis - 1] + " ayı Sonbahar mevsimine aittir.")
} else {
$("#mesaj").html(aylar[indis - 1] + " ayı Kış mevsimine aittir.")
}
}
Projeyi kaydedip çalıştıralım. Ayı 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. Ayları seçtiğimizde o ayın hangi mevsime denk geldiğini görürsünüz. Dikkat ettiyseniz ayların ismini dizi değişkeninden aldık. İstersek listbox etiketinin text değerini de alıp kullanabiliriz. Bu işlemi de javascript ya da jquery ile yapabiliriz.
var eleman = document.getElementById("ddlAy");
var ay = eleman.options[eleman.selectedIndex].text;
Şimdi de jquery ile listbox etiketinin seçilen elemanına ulaşalım.
var ay = $("#ddlAy option:selected").text();
Projeyi çalıştırdığımızda ilk eleman ay olmadığı halde mesaj hala görüntülenmektedir. Bu eleman seçildiğinde mesaj etiketinin içeriğini silelim.
if (indis == 0) {
$("#mesaj").html("");
return;
}
Mevsimleri de bulduğumuza göre, ilgili mevsime ait resmin animasyon kutusunda görüntülenmesine geldi sıra.. Öncelikle projemize images isminde bir klasör oluşturalım. Bu klasör içine ilkbahar, yaz, sonbahar ve kis isminde 4 adet resim ekleyelim. Bu resimleri projede kullanmak için resimler isminde bir dizi oluşturup elemanlarını girelim.
var resimler = ["images/ilkbahar.jpg", "images/yaz.jpg", "images/sonbahar.jpg", "images/kis.jpg"];
Şimdi bu resimleri 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.
if (indis == 3 || indis == 4 || indis == 5) {
$("#mesaj").html(ay + " ayı İlkbahar mevsimine aittir.");
animasyon(resimler[0], 1000);
} else if (indis == 6 || indis == 7 || indis == 8) {
$("#mesaj").html(ay + " ayı Yaz mevsimine aittir.");
animasyon(resimler[1], 1000);
} else if (indis == 9 || indis == 10 || indis == 11) {
$("#mesaj").html(ay + " ayı Sonbahar mevsimine aittir.");
animasyon(resimler[2], 1000);
} else {
$("#mesaj").html(ay + " ayı Kış mevsimine aittir.");
animasyon(resimler[3], 1000);
}
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. Açıklamalar üzerinde yapıldığı için kodlar hakkında bilgi vermeyeceğim.
var animasyon = function (res, zaman) {
$("#resim").attr("src", res);
// Kutunun yüksekliği
var yuk = $("#animasyon").height();
// Kutunun genişliği
var gen = $("#animasyon").width();
// Resmin başlangıç değeri için css ayarları
// Sol alt köşeye konumlanmak için gerekli ayarlamalar
$("#resim").css({
// top değeri resmin yüksekliğine ayarlanmalıdır
"top": "0px",
// left değeri 0 olmalıdır
"left": -gen,
// width değeri 0 olmalıdır
"width": gen,
// height değeri 0 olmalıdır
"height": yuk,
// Gölgelendirme başlangıçta sıfır olacaktır
"opacity": '0.0',
// resmin hareketi için position düzenleniyor
"position": "absolute"
}).animate({ // Resme animasyon uyguluyoruz
// Genişiliği 100% oluncaya kadar
"width": gen,
// Yüksekliği 100% oluncaya kadar
"height": yuk,
// top değeri 0 oluncaya kadar
"top": "0px",
// left değeri 0 oluncaya kadar
"left": "0px",
// Gölgelendirme 100% oluncaya kadar
"opacity": '1.0'
}, zaman);
}
Animasyonumuz soldan itibaren animasyon kutusunu dolduruyor. Ancak tarayıcı ekranında animasyon başladığı için ekran görüntüsü pek anlamlı olmuyor. Kutular için kullanılan yatay ve düşey cetveller vardır. Bu cetveller kutunun içinde fazla bilgi olduğunda otomatik olarak kutuya eklenir. Animasyon kutunun dışında başladığı için bu cetvellerin görüntülenmesini engellememiz gerekir. Animasyon kutusunun css özelliğini aşağıdaki gibi düzenleyelim.
#animasyon {
width: 100%;
height: 90%;
background-color: #dbd8d8;
position: relative;
overflow: hidden;
}
Projeyi çalıştırdığımızda animasyonun düzngün bir şekilde çalıştığını görürsünüz. Bu arada ilk elemanı seçtiğimizde resmin sıfırlanmasını da sağlayalım.
if (indis == 0) {
$("#mesaj").html("");
$("#resim").attr("src", "");
return;
}
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. Şimdi de fare resmin üzerine geldiğinde bir baloncuk yardımıyla ilgili resmin hangi mevsime ait olduğuna dair mesaj verdirelim. Bu işlemi gerçekleştirmek için aşağıdaki kodu kullanmalıyız.
$("#resim").attr("title", "İlkbahar Mevsimi");
Projeyi çalıştıralım. Fare ile resmin üzerine geldiğimizde verilen mesaj baloncuk yardımıyla görüntülenir.
|