Bu uygulama, bir dizi içerisindeki görselleri belirli bir hızda, tam ekran olacak şekilde ve rastgele köşelere doğru küçülerek değiştiren bir yapıya sahiptir.
1. Yapısal Analiz (HTML & CSS)
Bootstrap Entegrasyonu: Proje başında Bootstrap ve jQuery kütüphaneleri dahil edilmiştir. Bu, projenin daha geniş kapsamlı arayüz geliştirmelerine açık olduğunu gösterir.
Mutlak Konumlandırma: CSS kısmında yer alan #b { position: absolute; } kuralı kritiktir. Resmin ekran üzerinde serbestçe (top ve left değerleriyle) hareket edebilmesi için bu özelliğin tanımlanması gerekir.
2. Algoritma ve Çalışma Mantığı
Uygulama temel olarak slayt() isimli bir fonksiyonun özyinelemeli (recursive) olarak kendisini çağırmasıyla döner.
A. Giriş Animasyonu
Resim ilk başta width: 0, height: 0, opacity: 0 değerleriyle görünmez haldedir. animate() metoduyla bu değerler pencerenin tam genişlik ve yüksekliğine (gen, yuk) ulaştırılır. Böylece resim merkezden (veya sol üstten) büyüyerek ekranı kaplar.
B. Rastgele Çıkış Yönü Belirleme
Kodun en özgün kısmı burasıdır. Resim ekrandan silinirken sabit bir yöne değil, dört köşeden birine doğru küçülür:
1: Sol Üst (0,0)
2: Sağ Üst (gen, 0)
3: Sağ Alt (gen, yuk)
4: Sol Alt (0, yuk)
do-while döngüsü ve secildimi değişkeni sayesinde, bir görsel döngüsü bitene kadar aynı köşenin üst üste seçilmemesi sağlanmıştır.