AOS - انیمیشن در هنگام اسکرول

در طراحی وبسایت برای زیباتر نمایش دادن المان های داخل صفحه، و ایجاد جذابیت، نیاز داریم بعضی ( و یا حتی تمام ) المان ها زمانی که اسکرول صفحه بهشون می رسه، با یک اکشن جذابی به نمایش در بیان.

برای این کار راه های مختلفی وجود دارد. یکی از کتابخانه های مفید برای این کار میتونه AOSباشه.

در ابتدا نیاز هست لینک CSS و JS مربوطه را به صفحه اضافه کنیم

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

در ادامه، باید AOS را برای المان های داخل صفحه اجرا کنیم

<script>   
    AOS.init(); 
</script> 

پیشنیاز هایی لازم برای استفاده از کتابخانه، همین موارد هستند. حالا می توانیم به هر یک از المان های داخل صفحه، انیمیشن خاصی بدهیم تا در صورتی که اسکرول بر روی قسمت قرار گیری آنها در قالب رسید، اجرا شود.

برای مثال:

<div data-aos="fade-up"></div>

انیمیشن مربوطه داخل صفت ( attribute )  با نام data-aos قرار می گیرد. لیست این انیمیشن ها را می توانید در لینک گیت هاب AOS مشاهده کنید. همچنین در همین لینک می توانید لیست رفتار های قابل تنظیم برای المان مورد نظر رو با مواردی مانند :

data-aos-delay
data-aos-offset
data-aos-duration
data-aos-easing
data-aos-mirror

و موارد دیگری تنظیم کنید.

مشاهده دمو