Bundan önceki uygulamalarımızda animasyonlarımızı tarayıcı ekranının tamamında ve sadece bir defalık gerçekleştiriyorduk. Bu uygulamamızda ise animasyonumuzun sürekli devam etmesini sağlayacağız. Bu işlemi gerçekleştirmek için yine animate metodundan yararlanacağız. Daha önce oluşturulan animasyonu bir fonksiyon altında tanımlayıp o fonksiyonu sürekli çağıracağız. Böylece animasyon sürekli dönecektir. Şimdi animasyona ait uygulamamızı yapalım.
Visual Studio programını açalım.
İsmi Animasyon olan bir boş Asp.Net projesi oluşturalım.
Projeye index.html isminde bir web sayfası ekleyelim. Web sayfasının temel tanımlamalarını aşağıdaki gibi yapalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Animasyon İşlemleri</title>
<script src="lib/jquery/jquery.min.js"></script>
<style>
</style>
<script>
</script>
</head>
<body>
</body>
</html>
Projeye images isminde bir klasör ekleyelim. Bu klasör altına bir adet resim dosyası ekleyelim. Resmi body etiketi arasında tanımlayalım.
<body>
<img id="anim" src="images/kartal.jpg" title="Animasyon"/>
</body>
Projeyi çalıştırdığımızda resmin ekranda görüntülendiğini görürsünüz. Resmin tarayıcı ekranında boşluklar olmadan görüntülenmesini sağlayalım. Bunun gerekli css tanımlamalarını aşağıdaki gibi yapalım.
<style>
body {
margin: auto;
}
</style>
Projeyi çalıştırdığımızda resmin boşluklar olmadan görüntülendiğini görürsünüz. Resmin tarayıcı ekranında hareket etmesi için position özelliğini absolute yapalım.
<style>
body {
margin: auto;
}
#anim {
position: absolute;
}
</style>
Daha önceki animasyonlarda sayfa açılır açılmaz animasyon başlıyordu. Burada ise animasyonu bir fonksiyon içinde tanımlamamız gerekir.
<script>
var reklam = function (eleman, hiz) {
}
</script>
Fonksiyonu tanımladık. Şimdi tarayıcı ekranının genişliğini ve yüksekliğini bulalım.
var reklam = function (eleman, hiz) {
var yuk = $(window).height();
var gen = $(window).width();
};
Bu animasyonda resmimiz alt ortadan başlayıp üst ortadan çıkacak ve animasyon sürekli dönecek. Öncelikle resmi alt ortada konumlandırmamız gerekir. Şimdi onu yapalım.
eleman.css({
"top": yuk,
"left": gen / 2,
"width": "0px",
"height": "0px"
});
Öncelikle resmin ekranı kaplamasını sağlayalım.
eleman.animate({
"width": "100%",
"height": "100%",
"top": "0px",
"left": "0px",
}, hiz);
Fonksiyonumuzda resme ait en basit animasyonu tanımladık. Peki bu animasyonu nasıl çalıştıracağız. Sayfa yüklenir yüklenmez fonksiyonu çağırmamız gerekir. Şimdi bu işlemi yapalım.
$(function () {
reklam($("#anim"), 3000);
});
Projeyi kaydedip çalıştıralım. Resmin önce tam olarak görüntülendiğini daha sonra belirlenen noktada sıfırlanıp animasyonun gerçekleştiğini görürsünüz. Bu da animasyonu düzenli bir şekilde çalıştırmamaktadır. Bu sorunu çözmek için resmin başlanğıçta görüntülenmesini engellememiz gerekir. Bu işlemi css özelliklerinden display ile yapmamız gerekir. Tanımlamayı aşağıdaki gibi yapalım.
#anim {
position: absolute;
display: none;
}
Projeyi kaydedip çalıştıralım. Animasyonun kaybolduğunu görürsünüz. Çünkü resmi gizledik. Peki, resmi ne zaman görünür hale getirmeliyiz. Resmin alt ortada konumlanmasından sonra görünür yapılması gerekir. Hadi şimdi onu yapalım.
eleman.css({
"top": yuk,
"left": gen / 2,
"width": "0px",
"height": "0px",
"display": "block"
});
Projeyi kaydedip çalıştıralım. Animasyonumuz düzgün bir şekilde çalıştırılacaktır. Resmin üst ortadan kaybolmasını sağlayalım.
eleman.animate({
"width": "100%",
"height": "100%",
"top": "0px",
"left": "0px",
}, hiz, function () {
eleman.animate({
"width": "0px",
"height": "0px",
"top": "0px",
"left": gen / 2
}, hiz)
});
Projeyi kaydedip çalıştıralım. Animasyonun alt ortadan başlayıp üst ortada bittiğini görürsünüz. Şimdi bu animasyonun sürekli dönmesini sağlayalım.
eleman.animate({
"width": "100%",
"height": "100%",
"top": "0px",
"left": "0px",
}, hiz, function () {
eleman.animate({
"width": "0px",
"height": "0px",
"top": "0px",
"left": gen / 2
}, hiz, function () {
reklam(eleman, hiz);
})
});
Projeyi kaydedip çalıştıralım. Animasyonun sürekli döndüğünü görürsünüz. Konu ile ilgili sorularınızı bize sorabilirsiniz. Makaleyi sosyal medyada paylaşmayı unutmayalım.