Embedded Files
HAZIRLAYAN : HATİCE KOCATÜRK
Animasyon nedir?
Sayfalarımızın daha dikkat çekici ve canlı görünmesi için kullanılır. Geçişler, 3D, yazı vb. gibi birçok yerde kullanılabilir. JavaScript ile animasyon yapmak için bazı kütüphaneler kullanırız.
JavaScript kütüphaneleri nedir?
Bazı animasyonları kullanmak için JavavaScript kütüphaneleri kullanılır. JavaScript kütüphaneleri, bir web sitesi veya JavaScript tabanlı geliştirilmiş uygulamalara çeşitli işlev, fonksiyon ve nesneler kazandıran kod depolarıdır. Bu kütüphanelere ulaşmak için <head> etiketi içerisine aşağıdaki kodu yazmamız yeterlidir.
<script src="Buraya javascript kütüphane kaynak URL adresini yazın></script>
Biz aşağıdaki örneği kütüphane kullanmadan yapacağız. Aşağıda HTML/CSS ve JavaScript kodları ile çıktısı yer almaktadır.
HTML KODLARI
<!DOCTYPE html>
<html>
<link href="animasyon.css" rel="stylesheet">
<body>
<script src="animasyon.js"></script>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
</body>
</html>
JavaScript ile HTML animasyonlar nasıl oluşturulacağını göstermek için, basit bir web sayfası kullanacağız. <link> etiketi içerisine kullandığımız css dosyamızı ekliyoruz. <script> etiketi içerisine kullandıdğımız JavaScript dosyasını ekliyoruz. Dokununca animasyonumuzun harekete geçmesi için button ekliyoruz. Tüm animasyonlar bir kapsayıcı (container) elemanına göre olmalıdır. Container içerisine animasyon div ini ekleyip html kısmını tamamlıyoruz.
CSS KODLARI
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
Kapsayıcı div in position değerini relative yapıyoruz. Relative dediğimiz nesne normal akış içerisinde olmaya devam eder ancak "top, left, bottom, right" özelliklerini kullanma fırsatı verir. Belirli bir yükseklik ve genişlik değeri veriyoruz.
Animasyon div inin position değerini absolute yapıyoruz. Absolute dediğimiz nesne normal akış içerisinden çıkar ve 4 köşeden konumlandırma yapmamızı sağlar.
JAVASCRIPT KODLARI
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
JavaScript animasyonlar Bir elemanın tarzında kademeli değişiklikler programlayarak tarafından yapılır. Değişiklikler bir zamanlayıcı tarafından çağrılır. Zamanlayıcı aralığı küçük olduğunda, animasyon sürekli görünüyor.
JavaScript ile yazılmış bir fonksiyon çağrıldığında işlem yapar. Fonksiyonumuuz mymove adı ile çağırıyoruz.
document.getElementById("animate") ->animate niteliği taşıyan ilk kaydı getirir
var pos = 0; -> animasyonun başlangıçta köşeden boşluk bırakmadan başlaması için 0 değerini giriyoruz
setInterval(fonksiyon, milisaniye, dil) -> sırasıyla bu parametreleri alır. Frame fonksiyonu ve 5 milisaniye olarak ayarlıyoruz
function frame() -> frame fonksiyonunu çağırıyoruz
Javascript setInterval fonksiyonunu durdurmak için clearInterval() şeklinde çağırmanız gerekmekte
if (pos == 350){ clearInterval(id) } -> Pos değeri 350 ye geldiğinde durması gerektiğini belirtir
pos++ -> son ek olarak kullanılan ++ , artırma işleci artar ve artırmadan önce değeri döndürür
Eğer değer 350 ye eşit olmazsa üst ve soldan pos + px ekleyerek değere kadar ilerler
Click Me tuşuna bastığımızda kırmızı kutucuğun çapraz gidecek şekilde hareket etmesini sağlar.
Page updated
Report abuse