|
Jquery kütüphanesi ile web sayfalarında animasyonlar, oyunlar ve grafiksel gösterimler yapabilirsiniz. Yaptığınız web uygulaması üzerinde küçük dokunuşlar yaparak sayfanızın cazibesini arttırabilirsiniz. Bu uygulamamızda elimizde bulunan 5 resmin alt ortadan başlayarak farklı köşelerde bitmesini sağlayan animasyon uygulaması yapacağız.
Visual Studio programını açalım.
İsmi FlashAnimasyon olan yeni bir klasik Asp.Net projesi oluşturalım.
Projemize ismi animasyon.html isminde bir web sayfası ekleyelim.
Web sayfasının başlığını Animasyon Uygulaması olarak değiştirelim.
<title>Animasyon Uygulaması</title>
Resimlerin saklanacağı images isminde bir klasör ekleyelim.
Jquery kodlarının saklanacağı js isminde bir klasör ekleyelim.
Style özelliklierinin saklanacağı css isminde bir klasör ekleyelim.
İnternetten 5 tane manzara resmi indirelim ve image klasörü altına kopyalayalım. Resimlerin isimlerini sırasıyla resim1, resim2, resim3, resim4, resim5 olarak değiştirelim. Web sayfasında Solution Explorer paneli aşağıdaki gibi olacaktır. Uygulamaya ait resimleri buradan indirebilirsiniz. Web sayfasında Solution Explorer paneli aşağıdaki gibi olacaktır.
Jquery kütüphanesinin web sayfasına eklenmesi için Google amcaya başvuralım. Burada jquery Google cdn url deyip aratalım. Listelenen ilk web sayfasını açalım. Burada Script ile başlayan kodu kopyalayıp web sayfasında head etiketi arasına yapıştıralım.
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.7.1/jquery.min.js"></script>
Body etiketi arasına resimleri göstermek için id değeri resimler olan bir img etiketi ekleyelim.
<img id="resimler" src="" alt="" />
Burada src parametresinin değeri boş olacaktır. Resimleri sırayla kodlar yardımıyla alacağız.
Css özelliklerini eklemek için css klasörü üzerinde farenin sağ tuşuna basalım. Add / New Item diyelim. Ekrana gelen şablonlardan Style Sheet seçelim. Dosya ismi olarak stil.css ismini verelim. Add diyerek dosyayı oluşturalım. Bu dosyanın konumunu web sayfasına eklemek için dosya seçiliyken farenin sol tuşu basılı durumda sürükleyip head etiketi arasına ekleyelim. Sayfanın son hali aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animasyon Uygulaması</title>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.7.1/jquery.min.js"></script>
<link href="css/stil.css" rel="stylesheet" />
</head>
<body>
<img id="resimler" src="" title="" />
</body>
</html>
Web sayfasına ait css özelliklerini stil.css dosyası içine yazalım. Resmin gösterimini tarayıcı ekranında farklı yerlerden yapacağımız için position özelliğini absolute yapalım. Aksi takdirde resmimiz sürekli sol üstten başlar.
#resimler {
position: absolute
}
Resmin tarayıcı ekranında boşluklar olmadan köşeden itibaren gösterimi için body etiketine ait margin özelliğini auto olarak değiştirelim.
body {
margin: auto;
}
Animasyona ait kodları yazmaya başlayabiliriz. Biz kodları js klasörü altında js uzantılı bir dosya içinde yazacağız. Bunun için Solution Explorer panelinde js klasörü seçiliyken farenin sağ tuşuna basalım ve Add komut grubundan sonra New Item komutunu seçelim. Buradan JavaScript File dosya biçimini seçelim. Dosya ismini grafik.js olarak değiştirip Add komutuna tıklayalım.
Oluşturulan bu dosyanın animasyon.html web sayfası tarafından kullanılabilmesi için, önce animasyon.html dosyasını açalım. Aşağıdaki kodları head etiketi arasına yazalım.
<script src="js/grafik.js"></script>
Web sayfamızın son hali aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animasyon Uygulaması</title>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.7.1/jquery.min.js"></script>
<link href="css/stil.css" rel="stylesheet" />
<script src="js/grafik.js"></script>
</head>
<body>
<img id="resimler" src="" title="" />
</body>
</html>
Web sayfamız hazır. Resimler hazır. Harici kütüphaneler hazır. Artık kodları grafik.js dosyasına yazabiliriz.
Öncelikle web sayfasında görüntülenecek resimleri bir dizi yardımıyla belleğe almamız gerekir. Bu işlem için dosyalar isminde bir dizi oluşturalım ve resimleri bu diziye ekleyelim.
var dosyalar = ["image/resim1.jpg", "image/resim2.jpg",
"image/resim3.jpg", "image/resim4.jpg", "image/resim5.jpg"];
Sıradaki resmi diziden seçmek için i değişkenini tanımlayalım.
var i = 0;
Resmin farklı köşelerden kaybolmasını belirlemek için sec değişkenini tanımlayalım.
var sec;
Seçilen köşelerin daha önce seçilip seçilmediğini kontrol etmek için secildimi değişkenini tanımlayalım.
var secildimi = "";
Resmin left özelliği için x, top özelliği için y değişkenlerini tanımlayalım.
var x;
var y;
Değişkenleri tanımlama işlemi tamamlandı. Buna göre grafik.js dosyamızın son görünümü aşağıdaki gibi olacaktır.
var dosyalar = ["image/resim1.jpg", "image/resim2.jpg",
"image/resim3.jpg", "image/resim4.jpg", "image/resim5.jpg"];
var i = 0;
var sec;
var secildimi = "";
var x;
var y;
Web sayfası yüklenir yüklenmez belirlediğimiz kodların çalışması için gerekli olan fonksiyonu tanımlayalım.
$(function () {
})
Şimdi de bu fonksiyonun içine dosyalar dizisinde yer alan ilk resmi img etiketiyle görüntülemek için gerekli olan kodu yazalım.
$("#resimler").attr("src", dosyalar[i]);
Bu kodu yazdıktan sonra projemizi kaydedip çalıştıralım. Web sayfasında resim1.jpg isimli resim görüntülenecektir.
Sıra geldi resimlerin arka arkaya görüntülenmesi işlemine. Bu işlem için slayt isminde bir fonksiyon tanımlayalım.
function slayt(resmimiz, hiz) {
}
Dikkat ettiyseniz slayt fonksiyonu iki adet parametre almaktadır. İlk parametre olan resmimiz değişkeni web sayfasındaki resimler img etiketi için kullanılacaktır. İkinci parametre olan hiz ise, animasyonun milisaniye cinsinden süresini belirlemek için kullanılacaktır.
Dilerseniz kod yazma işlemini bırakalım. Yapacağımız uygulamaya ait açıklamalarda bulunalım. Animasyonumuz alt ortadan başlayacaktı. Alt ortayı bulmak için aşağıdaki resmi inceleyebilirsiniz.
Yukarıda görüldüğü gibi resmin alt orta noktadan başlayabilmesi için left ve top ayarları verilmiştir. Burada tarayıcı ekranına ait width ve height değerlerini bulmak için slayt fonksiyonuna aşağıdaki kodları yazınız.
var yuk = $(window).height();
var gen = $(window).width();
Şimdi animasyonun alt ortadan başlaması için resme ait css ayarlamalarını yapalım. Resme ait css ayarları için slayt fonksiyonun ilk parametresi olan resmimiz değişkeninden faydalanacağız. Yukarıda bulunan ayarlamalara göre animasyonun alt ortadan başlaması için resme ait css ayarları aşağıdaki gibi olacaktır.
resmimiz.css({
"top": yuk,
"left": gen / 2,
"width": "0px",
"height": "0px",
"opacity": '0.0'
});
Fonksiyona ait diğer kodları yazmadan önce başlangıç fonksiyonundan slayt fonksiyonunu çağırma işlemini yapalım. Hatırlarsanız projeyi çalıştırdığımızda dosyalar dizisi içinde yer alan ilk resim ekranda görüntüleniyordu. Şimdi fonksiyonu çağırma işlemini yapalım. Bunun için aşağıdaki kodu başlangıç fonksiyonu içine yazınız.
slayt($("#resimler"), 1000);
Buna göre grafik.js isimli dosyamızın son hali aşağıdaki gibi olacaktır.
var dosyalar = ["image/resim1.jpg", "image/resim2.jpg",
"image/resim3.jpg", "image/resim4.jpg", "image/resim5.jpg"];
var i = 0;
var sec;
var secildimi = "";
var x;
var y;
$(function () {
$("#resimler").attr("src", dosyalar[i]);
slayt($("#resimler"), 1000);
})
function slayt(resmimiz, hiz) {
var yuk = $(window).height();
var gen = $(window).width();
resmimiz.css({
"top": yuk,
"left": gen / 2,
"width": "0px",
"height": "0px",
"opacity": '0.0'
});
}
Web sayfasını kaydedip çalıştırdığınızda ekranda herhangi bir resim görüntülenmeyecektir. Çünkü resmin genişliğini ve yüksekliğini 0 px olarak ayarlamıştık.
Şimdi ilk resmin ekranı kaplamasını sağlayalım. Bir resmin ekranı kaplaması için left ve top değerlerinin 0 px, width ve height değerlerinin 100% olması gerekir. Programda width ve height değerlerinin 100% halini kullanmak için sırasıyla gen ve yuk değişkenlerini tanımlamıştık. Buna göre animasyon kodumuzu yazalım.
resmimiz.animate({
"width": gen,
"height": yuk,
"top": "0px",
"left": "0px",
"opacity": '10.0'
});
Web sayfasını kaydedip çalıştırdığımızda ilk resmin ekranı kapladığını görürsünüz.
Ekrana gelen resmi sağ üst noktadan sahneden çıkaralım. Bunun için left değeri, top değeri 0, width ve height değerleri de 0 olmalıdır. Biliyorsunuz ki, animate komutu ile bu işlemi gerçekleştirebiliriz. Resme ait animate komutunu aşağıdaki gibi düzenleyelim.
resmimiz.animate({
"width": gen,
"height": yuk,
"top": "0px",
"left": "0px",
"opacity": '10.0'
}, hiz, function () {
resmimiz.animate({
"width": "0px",
"height": "0px",
"top": "0px",
"left": gen,
"opacity": '0.0'
})
});
Nasıl. Bayağı mesafe katettik değil mi. Şimdi de resme uyguladığımız animasyonu sonsuz yapmaya çalışalım. Bunun için slayt fonksiyonunu tekrar çağırmamız gerekir. Animate komutuna ait kullanımı aşağıdaki gibi ayarlayınız.
resmimiz.animate({
"width": gen,
"height": yuk,
"top": "0px",
"left": "0px",
"opacity": '10.0'
}, hiz, function () {
resmimiz.animate({
"width": "0px",
"height": "0px",
"top": "0px",
"left": gen,
"opacity": '0.0'
}, hiz, function () {
slayt(resmimiz, 1000);
});
});
Projeyi kaydedip çalıştıralım. Artık birinci resmin sürekli ekrana gelip gittiğini görürsünüz. Peki diğer resimleri nasıl çağıracağız?. Sırası gelen resim img etiketine nasıl yüklenecek?. Daha önce kullanılan köşe tekrar nasıl kullanılmayacak?. Animasyon bu kurallara göre nasıl sonsuz çalışacak?.
Halledilecek daha bir sürü iş var desenize. Şimdi bu sorulara cevap bulmaya çalışalım.
Öncelikle kullanılacak köşeleri ve bu köşelerde left, top değerlerinin ne olacağını bilmemiz gerekir. Aşağıdaki tabloda olması gereken köşeler ve değerler verilmiştir.
|
Köşe İsmi |
Left Değeri |
Top Değeri |
|
Sol Üst |
0 |
0 |
|
Sol Orta |
0 |
yuk/2 |
|
Sol Alt |
0 |
yuk |
|
Alt Orta |
gen/2 |
yuk |
|
Sağ Alt |
gen |
yuk |
|
Sağ Orta |
gen |
yuk/2 |
|
Sağ Üst |
gen |
0 |
|
Üst Orta |
gen/2 |
0 |
Yukarıda köşe olarak 8 tane seçenek mevcuttur. Bu seçeneklerden birinin rastgele seçilmesi için Math.random() komutu kullanılacaktır. Bu komut aracılığıyla seçilen değeri sec değişkenine aktaralım ve sonucu secildimi değişkeni içinde arayalım. Eğer secildimi değişkeni içinde sec değeri varsa yeniden seçim yapması için do döngüsünü kullanalım. Eğer secildimi değişkeni içinde sec değeri yoksa, bu değeri secildimi değişkenine ekleyelim. Şimdi bu anlattıklarımızı kodlayalım.
do {
sec = Math.floor(Math.random() * 8) + 1;
} while (secildimi.indexOf(sec) != -1);
secildimi += sec;
Peki bunları nereye yazacağız. Resim alt ortadan itibaren ekranı kaplamıştı. Bizden istenen resim geri dönerken hangi köşeden kaybolacağıydı. Onun için bu kodları resmin ikinci halinin başına yazacağız. Buna göre animate komutunun son hali aşağıdaki gibi olacaktır.
resmimiz.animate({
"width": gen,
"height": yuk,
"top": "0px",
"left": "0px",
"opacity": '10.0'
}, hiz, function () {
do {
sec = Math.floor(Math.random() * 8) + 1;
} while (secildimi.indexOf(sec) != -1);
secildimi += sec;
resmimiz.animate({
"width": "0px",
"height": "0px",
"top": "0px",
"left": gen,
"opacity": '0.0'
}, hiz, function () {
slayt($(resmimiz, 1000);
});
});
Resmin hangi köşeden çıkacağını sec değişkeni yardımı ile belirledikten sonra, ilk başta verdiğimiz x ve y değişkenleri yardımıyla left ve top değerlerini tabloya bakarak yazmaya çalışalım. Tabii burada hangi köşenin seçildiğini bulmamız gerekir. Bunun için switch komutunu kullanalım.
switch (sec) {
case 1:
x = "0px";
y = "0px";
break;
case 2:
x = "0px";
y = yuk / 2;
break;
case 3:
x = "0px";
y = yuk;
break;
case 4:
x = gen / 2;
y = yuk;
break
case 5:
x = gen;
y = yuk;
break
case 6:
x = gen;
y = yuk / 2;
break
case 7:
x = gen;
y = "0px";
break
case 8:
x = gen / 2;
y = "0px";
break
}
Buna göre animate komutunun son hali aşağıdaki gibi olacaktır.
resmimiz.animate({
"width": gen,
"height": yuk,
"top": "0px",
"left": "0px",
"opacity": '10.0'
}, hiz, function () {
do {
sec = Math.floor(Math.random() * 8) + 1;
} while (secildimi.indexOf(sec) != -1);
secildimi += sec;
switch (sec) {
case 1:
x = "0px";
y = "0px";
break;
case 2:
x = "0px";
y = yuk / 2;
break;
case 3:
x = "0px";
y = yuk;
break;
case 4:
x = gen / 2;
y = yuk;
break
case 5:
x = gen;
y = yuk;
break
case 6:
x = gen;
y = yuk / 2;
break
case 7:
x = gen;
y = "0px";
break
case 8:
x = gen / 2;
y = "0px";
break
}
resmimiz.animate({
"width": "0px",
"height": "0px",
"top": y,
"left": x,
"opacity": '0.0'
}, hiz, function () {
slayt(resmimiz, 1000);
});
});
Projeyi kaydedip çalıştırırsanız ilk resmin alt ortadan başlayıp farklı köşelerden sahneyi terk ettiğini görürsünüz. Geldik son aşamaya. Hatırlarsanız dosyalar isimli diziden ilgili resmi seçmek için i değişkenini tanımlamıştık. Şimdi bu değişken yardımıyla resimleri seçme işlemini yapacağız.
i++;
if (i == 5) {
i = 0;
secildimi = "";
}
resmimiz.attr("src", dosyalar[i]);
Bu kodları nereye yazacağız. İlk resim sahneyi terk ettiği zaman ikinci resim için slayt fonksiyonu çağrılacağı zaman yukarıdaki kodları yazmamız gerekir. Buna göre animate komutunun son hali aşağıdaki gibi olacaktır.
resmimiz.animate({
"width": gen,
"height": yuk,
"top": "0px",
"left": "0px",
"opacity": '10.0'
}, hiz, function () {
do {
sec = Math.floor(Math.random() * 8) + 1;
} while (secildimi.indexOf(sec) != -1);
secildimi += sec;
switch (sec) {
case 1:
x = "0px";
y = "0px";
break;
case 2:
x = "0px";
y = yuk / 2;
break;
case 3:
x = "0px";
y = yuk;
break;
case 4:
x = gen / 2;
y = yuk;
break
case 5:
x = gen;
y = yuk;
break
case 6:
x = gen;
y = yuk / 2;
break
case 7:
x = gen;
y = "0px";
break
case 8:
x = gen / 2;
y = "0px";
break
}
resmimiz.animate({
"width": "0px",
"height": "0px",
"top": y,
"left": x,
"opacity": '0.0'
}, hiz, function () {
i++;
if (i == 5) {
i = 0;
secildimi = "";
}
resmimiz.attr("src", dosyalar[i]);
slayt(resmimiz, 1000);
});
});
|