jQuery Animate Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere HTML ve CSS yardımı ile oluşturduğumuz nesneleri mouse olayları ile nasıl animasyonlu olarak hareketlendirebileceğimizi anlatacağım. Örnek vermek gerekirse, CSS yardımı genişlik değeri 200px olan bir div üzerine mouse imlecini getirdiğimizde genişliğini 400px olarak değiştirebiliriz. Ancak bunu jQuery animate kullanarak yaptığımızda bu div in örneğin ” 1 ” saniyelik bir süre de bu hale gelmesini sağlayabilecek bir animasyon oluşturabiliriz. Ayrıca bir beyin fırtınası oluşturarak siteler için hazırlanan Flash Banner ‘lar da ki çok ileriye kaçmamış görüntüleri bu metodu kullanarak HTML olarak da oluşturabiliriz.
Bu makale için oluşturacağımız uygulamamıza geçelim. Bir klasör yaratalım ve içerisine ” index.html ” isimli sayfa oluşturalım. Daha sonra jQuery kütüphanemizi indirmek için ” jquery.com ” adresine girelim ve anasayfada bulunan ” Download ” butonuna tıklayarak açılan sayfayı ” Farklı Kaydet ” seçeneği ile uygulama için açtığımız klasöre kaydedelim.
Uygulama için gerekli olan oluşturma ve indirme kısımları bu kadarla sınırlıdır. Şimdi HTML sayfamızı açalım ve ilk olarak klasik HTML kodlarımızı yazıp jQuery kütüphanemizi sayfamıza dahil edelim. Daha sonra da üç adet div oluşturalım. Sırası ile bu div ‘lerin Class değerini ” one , two , three ” olarak verelim.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Animate Uygulaması</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
Şimdi inline CSS yazarak bu üç div ‘in genişlik ve yükseklik değerleri ile birer kutu haline getirip ayrı ayrı arkaplan renkleri verelim.
Bu işlemlerle birlikte HTML ‘imizin son hali şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Animate Uygulaması</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
.one{width: 200px; height: 200px; background: green;}
.two{width: 200px; height: 200px; background: orange;}
.three{width: 200px; height: 200px; background: darkblue;}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
Sayfamızın görünümünü açtığımızda oluşan div ‘leri ve konumlandırmalarını göreceğiz. jQuery ile yapacağımız;
- One isimli div ‘i 1 Saniye de 500px genişliğe ulaştıracağız.
- Two isimli div ‘i 1,5 Saniye de 750px genişlik ve 30px sol boşluk kazandıracağız.
- Three isimli div ‘i 2 Saniye de 100% genişliğe ulaştıracağız.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Animate Uygulaması</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$('.one').animate({"width":"500px"},1000);
$('.two').animate({"width":"750px","margin-left":"30px"},1500);
$('.three').animate({"width":"100%"},2000);
});
</script>
<style>
.one{width: 200px; height: 200px; background: green;}
.two{width: 200px; height: 200px; background: orange;}
.three{width: 200px; height: 200px; background: darkblue;}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 32 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar