AOS Nedir ? Bu Js Kütüphanesi Nasıl Kullanılır?

İçindekiler
Bu yazımızda web sitenizde kullanabileceğiniz harika bir java script kütüphanesinden bahsedeceğim. Benimde kendi sitelerimde kullandığım bu eklenti ile çok güzel siteler tasarlayabilirsiniz. Gelin isterseniz Aos nedir konusunu anlatarak yazımıza başlayalım ve nasıl kullanacağınızı örneklerle açıklayalım.
AOS Nedir ?
Öncelikle AOS nedir kavramını açıklayalım. Bu kütüphane sitemizin içerisindeki div etiketleri kullanarak ayırdığımız bölümleri AOS kütüphanesi sayesinde animasyonlu bir şekilde görüntülenmesini sağlar. Animasyonlu görüntüden kasıt power point programında slayt hazırlar gibi bölümlerin ve içerisindeki bileşenlerin sağdan soldan yukarıdan ve daha bir çok şekilde sayfada görüntülenmesidir. Görsellerle nasıl kullanılacağını kısaca anlatalım.

AOS Kütüphanesini Nasıl Kullanılır?
aos java script kütüphanesi sitesi : michalsnik.github.io/aos/
Öncelikle gerekli olan css dosyası ve java dosyasının bağlantılarını sitemize eklemeliyiz. Bunun için Aos nin web sitesine giriş yapıyoruz. Sayfanın en altında bulunan kodları sayfamıza ekliyoruz. Yazının devamında kodları bulabilirsiniz ancak güncelleme yapılmış olma ihtimaline karşı kodların orijinal sitelerinden alınmasını tavsiye ederim.
AOS Siteye Entegre Etme
css ve java dosyalarının sitemize eklenmesi gerekmektedir. Aşağıda bulunan kodlar sayesinden bu işlemi gerçekleştirebilirsiniz. Css kodunu sitenin head bölümüne ve js kodunu ise body etiketi bitiminden bir önceki satıra eklenmelidir.
CSS
<link href=“https://unpkg.com/aos@2.3.1/dist/aos.css” rel=“stylesheet”>
JS
<script src=“https://unpkg.com/aos@2.3.1/dist/aos.js”></script>
Bu kodlardan Css kodunu <head></head> etiketleri arasına java script kodunu ise </body> etiketinin hemen üzerine ekliyoruz. Ayrıca yine </body> etiketinin hemen üzerine aşağıdaki kodu ekliyoruz.
<script>
AOS.init();
</script>
Bu sayede sitemiz artık AOS kütüphanesini kullanabilir hale geliyor.
Örnek kodlarla kullanımını gösterelim.
Bir bölümün tablonuzun sayfa yüklendiği sırada sağdan giriş yapmasını istiyorsanız.
<div data-aos=“fade-right”></div>
yada div etiketlerinin icerisine <section></section> etiketi açıp buna animasyon ekliyoruz. onun yazım şekli ise
<section data-aos=“fade-right”> </section>
Dönerek açılan bir animasyon istiyorsanız eğer
<div data-aos=“flip-left”></div>
komutlarını kullanıyorsunuz.
Zoom efekti vermek isterseniz
<div data-aos=“zoom-in”></div>
komutlarını kullanıyorsunuz.
Sayfanızda bir bölümün yukarıdan aşağıya belirli bir sürede açılmasını isterseniz ise
<div data-aos=“fade-up” data-aos-duration=“3000”> </div>
kodlarını kullanıyorsunuz. Burada data-aos-duration=“3000” mili saniye cinsinden efektin süresini ayarlıyor. İsteğinize göre değiştirebilirsiniz.
Daha fazla örnek uygulama ve görselleri için AOS sitesini ziyaret etmelisiniz.
michalsnik.github.io/aos/