Web sayfalarında kullanıcıların isteklerine göre animasyonlar oluşturabilirsiniz. Core Mvc projelerinde animasyonları ister terminal tabanlı isterse sunucu tabanlı olarak tasarlayabilirsiniz. Biz burada jquery kütüphanesi içinde yer alan animate() metodundan yararlanarak resmin sağ alttan başlayarak sol altta biten basit bir animasyon yapacağız.
Bu web projesinde neler öğreneceğiz.
1. Yeni bir web projesi oluşturma
2. Yeni bir web sayfası oluşturma
3. jquery kütüphanesini web sayfasına ekleme
4. Resmi web projesine dahil etme
5. Resmi web sayfasında gösterme
6. Projeyi çalıştırıp resmi web sayfasında gösterme
7. Css dilini web sayfasına dahil etme
8. Resmi tarayıcı ekranının tamamında göstermek için css özelliklerinden yararlanma
9. jquery dilinde kod yazmak için gerekli tanımlamayı yapma
10. jquery dilinde bağlangıç metodunu tanımlama
11. Tarayıcı ekranının genişliğini ve yüksekliğini bulma
12. Kodla sahnede bulunan resim dosyasına ulaşma
13. Resim dosyasının transform özelliklerini öğrenme
14. Resim dosyasının transform özelliklerini css özelliklerini kod sayfasından değiştirme
15. Projeyi çalıştırıp resmin sayfada yok olduğunu görme
16. animate() metodunun temel tanımlamasını yapma
17. Resme ait animasyon değerlerini kodla değiştirme
18. Projeyi çalıştırıp sonucu görme
19. Projeyi yayınlayıp internet sayfasında görüntüleme
Şimdi bu işlemleri gerçekleştirelim. Öncelikle Visual Studio programını açalım. Ben 2022 versiyonunu kullanıyorum. Başlat menüsünde devenv yazıp Enter tuşuna bastığınızda program açılacaktır. Program açıldığında Create A New Project diyerek yeni bir proje oluşturalım. Şablonlardan Asp.Net Core Empty seçelim. Projenin ismini AnimTerm olarak verelim. Create diyerek projeyi oluşturalım.
Projenin bel kemiği olan program.js dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Animasyon}/{action=Oynat}"
);
app.Run();
Projemizi Mvc teknolojisine göre düzenlemek için gerekli klasörleri oluşturalım. Animasyon isminde bir controller dosyası oluşturalım. Daha sonra Oynat isminde bir view dosyası oluşturalım. Web sayfasının başlığına Animasyon Örneği ismini verelim. Web sayfamız aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Animasyon Örneği</title>
</head>
<body>
</body>
</html>
Projeyi kaydedip çalıştıralım. Hatasız bir şekilde projenin çalıştığını görürsünüz. Jquery script diline ait kodları web sayfasında kullanmak için kütüphanenin web sayfasına eklenmesi gerekir. Bunun için Chrome programını açalım. Adres çubuğuna jquery google yazalım. Ekrana gelen adreslerden ilkine tıklayalım. Burada yer alan adresi seçip kopyalayalım. Daha sonra web sayfasında head etiketi arasında en üste yapıştıralım. Web sayfamız aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Animasyon Örneği</title>
<script src=
"https://
ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
Şimdi resmimizi web sayfasına dahil edelim. Bunun için öncelikle wwwroot klasörü içine resim dosyalarını saklayacağmız img isminde bir klasör oluşturalım. Ben proje için buradaki resmi kullanacağım. Resmi internetten indirdikten sonra projemizde img klasörünün içine kopyalayalım.
Şimdi sıra geldi resmi web sayfasına eklemeye. Proje içerisinde yer alan bir resmi web sayfasına eklemenin en kolay yolu resim seçiliyken fareyle sürükleyip body etiketi arasına bırakmaktır. Bu işlemi yaptıktan sonra web sayfamız şöyle olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Animasyon Örneği</title>
<script src=
"https://
ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
</head>
<body>
<img src="~/img/kartal.jpg" />
</body>
</html>
Projemizi kaydedelim ve çalıştıralım. Resmin web sayfasında gösterildiğini görürsünüz. Dikkat ettiyseniz resmimiz yukarıya ve sola tam dayalı olarak yanaşmadı. Bir miktar boşluk oluştu. Şimdi projemize css özellikleri ekleyerek bu sorunu çözeceğiz. Öncelikle wwwroot klasörü altında css isminde bir klasör oluşturalım. Daha sonra bu klasör altında styles.css isminde bir css dosyası oluşturalım. Daha sonra bu dosyayı sürükleyip bıarakarak head etiketi arasına burakalım. Web sayfamızın tamamı aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Animasyon Örneği</title>
<script src=
"https://
ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link href="~/css/styles.css" rel="stylesheet" />
</head>
<body>
<img src="~/img/kartal.jpg" />
</body>
</html>
Tarayıcı ekranının tamamına ait kontrolleri body etiketi ile gerçekleştirmekteyiz. Aşağıdaki tanımlamayı styles.css dosyasında yaparak sol ve üstteki boşlukları sıfırlıyoruz.
body {
margin: auto;
overflow: hidden;
}
Sayfayı kaydedip çalıştırdığımızda resmin en üste ve sola yanaştığını görürsünüz. Jquery kodlarını web sayfasında kullanmak için wwwroot klasörü altında js isminde bir klasör oluşturalım. Bu klasör altında anim.js isminde bir script dosyası oluşturalım. Dosyayı head etiketi arasına sürükleyip bırakalım. Web sayfamızın görünümü aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Animasyon Örneği</title>
<script src=
"https://
ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link href="~/css/styles.css" rel="stylesheet" />
<script src="~/js/anim.js"></script>
</head>
<body>
<img src="~/img/kartal.jpg" />
</body>
</html>
Web sayfası yüklenir yüklenmez jquery kodlarının çalışması için birden fazla yöntem vardır. Ancak ben burada en yaygın olanı kullanacağım. Aşağıdaki metod bu işlem için kullanılmaktadır.
$(function () {
});
Web sayfası çalışır çalışmaz bu metodun içindeki kodları bir defaya mahsus çalıştıracaktır. Artık yavaş yavaş kod yazmaya başlayalım. İlk olarak tarayıcı ekranının genişliğini ve yüksekliğini öğrenelim. Bu işlem için window komutunun width ve height özelliklerinden yararlanacağız. Bu değerleri yuk ve gen isminde iki değişkene aktaralım.
$(function () {
var yuk = $(window).height();
var gen = $(window).width();
});
Şimdi de resmimize kodlarla ulaşalım. Dikkat ettiyseniz img etiketinde sadece src özelliği kullanılarak resim dosyası görüntülenmektedir. Bu dosyaya kodlar yardımıyla ulaşmanın birden fazla yöntemi vardır. Ben bu dosyaya id değeri vererek ulaşmak istiyorum. Bu amaçla resim dosyasına id olarak oyun ismini vermek istiyorum. Buna göre img etiketinin tanımı şöyle olacaktır. <img id="oyun" src="Images/kostebek.png" />. Web sayfamızın son hali şöyle olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Animasyon Örneği</title>
<script src=
"https://
ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link href="~/css/styles.css" rel="stylesheet" />
<script src="~/js/anim.js"></script>
</head>
<body>
<img id="oyun" src="img/kartal.jpg" />
</body>
</html>
Nasıl? Epey yol aldık değil mi?. Ancak hala kod kısmını ve animasyon kısmını tamamlamadık. Şimdi resim dosyasına ulaşalım ve css özelliklerini yeniden düzenleyelim. Resim dosyasına kod sayfasından ulaşmak için $("#oyun") kod yapısı kullanılır. Artık resim dosyasına ait tüm özelliklere ulaşabilirim. Bunun için $("#oyun") kodundan sonra (.) dediğimde resim dosyasına ait tüm özellikler listelenecektir. Ben css özelliklerini değiştireceğim için css yazıyorum. Kodun yapısı aşağıdaki gibi olacaktır.
$("#oyun").css({
});
Süslü parantezler arasında css özelliklerini rahatlıkla tanımlayabilirim. Burada başlangıçta resmin sağ altta olmasını istiyorum. Bir nesnenin konumunu belirlemek için top, left özelliklerinden, büyüklüğünü belirlemek için wifth, height özelliklerinden yararlanılır. Başlangıçta resim dosyası ekranda sağ altta görünmeyeceği için top değerini yuk, left değerini gen değeriyle değiştirip width ve height özelliklerinin değerlerini 0 yapıyorum.
$("#oyun").css({
"top": yuk,
"left": gen,
"width": "0px",
"height": "0px"
});
Projeyi kaydedip çalıştırdığınızda resmin ekranda gösterilmediğini görürsünüz. Çünkü kodlarla resim dosyasının değerini sıfırladık. Şimdi animasyon uygulayarak resmin ekranın tamamını kaplamasını sağlayalım. Bu işlem için animate() komutundan yararlanılmaktadır. resim dosyasının nasıl seçildiğini göstermiştik. Bu komutun eklenebilmesi için (.) karakterinden sonra animate yazmanız yeterlidir. Kodumuz aşağıdaki gibi olacaktır.
$("#oyun").animate({
});
Resim dosyasının özellikleri üzerinde işlem yaparak animasyonumuzu tanımlayabiliriz. Amacımız neydi. Resmin sağ alttan başlayarak ekranı kaplamasını istiyorduk. Resmin sağ alttan itibaren ekranı kaplaması için top ve left değerlerinin 0 olması gerekir. Width değerinin ekranın genişliğine yani gen değerine, Height değerinin ekranın yüksekliğine yani yuk değerine eşit olması gerekir. Buna göre animasyon kodumuz aşağıdaki gibi olacaktır.
$("#oyun").animate({
"top": "0px",
"left": "0px",
"width": gen,
"height": yuk
});
Web sayfasını kaydedip çalıştırdığımızda animasyonun sağ alttan başlaması gerekirken sol üstten başlayıp ekranı kapladığını görürsünüz. Web sayfalarında eklenen nesneler position itibariyle statiktirler. Bundan dolayı nesnelerin hareketi mümkün değildir. Öncelikle img nesnesinin position özelliğini absolute yapmamız gerekir. Aşağıdaki tanımlamayı css dosyasına ekleyelim.
#oyun {
position: absolute;
}
Web sayfasını kaydedip çalıştırdığımızda animasyonun sağ alttan başladığını ve çok hızlı bir şekilde tamamlandığını görürsünüz. Ben animasyonun biraz yavaş olmasını istiyorum. Bunun için animate() komutu tanımlanırken süreyi de belirleyebilirsiniz. Burada süre milisaniye cinsinden bir değerdir. Ben animasyonun 3 saniyede tamamlanmasını istiyorum. Bunun zaman değerini 3000 yapıyorum. Buna göre animate komutumun yazım biçimi aşağıdaki gibi olacaktır.
$("#oyun").animate({
"top": "0px",
"left": "0px",
"width": gen,
"height": yuk
},3000);
Projeyi kaydedip çalıştırdığımızda animasyonun yavaş yavaş tamamlandığını görürsünüz. Ekranı kaplayan resmin sol alttan sahneden ayrılmasını sağlayalım. Bunun için animate() metodunu kullanacağız. Resmin sol alttan sıfırlanarak çikması için top değeri yuk, left değeri 0, widtth ve height 0 olmalıdır. Hadi şimdi bu tanımlamayı yapalım.
$("#oyun").animate({
"top": "0px",
"left": "0px",
"width": gen,
"height": yuk
}, 3000, function () {
$("#oyun").animate({
"top": yuk,
"left": "0px",
"width": "0px",
"height": "0px"
});
});
Web sayfasını kaydedip çalıştırdığımızda animasyonun sağ alttan başladığını ve çok hızlı bir şekilde sol altta tamamlandığını görürsünüz. Burada da animasyon süresini 3 saniye yapalım. Kodumuzun son hali aşağıdaki gibi olacaktır.
$("#oyun").animate({
"top": "0px",
"left": "0px",
"width": gen,
"height": yuk
}, 3000, function () {
$("#oyun").animate({
"top": yuk,
"left": "0px",
"width": "0px",
"height": "0px"
}, 3000);
});
Artık web sayfamız hazır. Sıra geldi bu web sayfasını yayınlamaya. Hazırdağımız web sayfasını web sayfanızın olduğu sunucuya atılıp orada bir adres yardımıyla kullanılmasını sağlamalısınız. Ben bu uygulamayı kendi web sunucumda uygulamalar sekmesi altında yayınladım.