کتابخانه‌ جاوااسکریپت AOS.js

AOS.js یک ابزار ساده و سبک برای افزودن انیمیشن‌هایی مثل محو شدن، لغزش، چرخش و بزرگ‌نمایی به عناصر هنگام اسکرول صفحه است. این کتابخانه به طراحان وب این امکان را می‌دهد که عناصر HTML هنگام وارد شدن به صفحه یعنی وقتی کاربر اسکرول می‌کند و آن عنصر در دید قرار می‌گیرد به‌صورت خودکار با افکت‌های مختلف ظاهر شوند.

کتابخانه‌ی JavaScript به نام AOS.js مخفف: Animate On Scroll برای ایجاد انیمیشن‌های هنگام اسکرول در صفحات وب استفاده می‌شود.

این کتابخانه به طراحان وب این امکان را می‌دهد که عناصر HTML هنگام وارد شدن به صفحه یعنی وقتی کاربر اسکرول می‌کند و آن عنصر در دید قرار می‌گیرد به‌صورت خودکار با افکت‌های مختلف ظاهر شوند.

AOS.js یک ابزار ساده و سبک برای افزودن انیمیشن‌هایی مثل محو شدن، لغزش، چرخش و بزرگ‌نمایی به عناصر هنگام اسکرول صفحه است.

برای مثال، وقتی کاربر به پایین صفحه می‌رود و یک تصویر یا متن وارد محدوده‌ی دید او می‌شود، آن عنصر به‌صورت متحرک ظاهر می‌شود. این‌کار باعث ایجاد تجربه‌ای روان‌تر، جذاب‌تر و تعاملی‌تر در رابط کاربری می‌شود، بدون اینکه نیاز به نوشتن کدهای پیچیده‌ی JavaScript یا CSS باشد.

AOS.js با استفاده از داده‌-ویژگی‌هایی مثل data-aos=”fade-up” یا data-aos=”zoom-in” به‌راحتی روی هر عنصر HTML قابل پیاده‌سازی است. شما کافی است کتابخانه را به پروژه اضافه کرده و از این ویژگی‌ها استفاده کنید. این کتابخانه هنگام اسکرول، مکان عنصر را بررسی کرده و اگر در محدوده‌ی دید قرار گیرد، کلاس‌هایی برای اجرای انیمیشن به آن اضافه می‌کند. AOS از عملکردی سریع و بدون وابستگی به jQuery برخوردار است، و همچنین از تنظیمات پیشرفته مانند زمان‌بندی، تأخیر، تکرار و کنترل رفتار در دستگاه‌های مختلف پشتیبانی می‌کند.

در ادامه لیستی از رایج‌ترین انیمیشن‌هایی که با AOS.js می‌توان پیاده‌سازی کرد، همراه با توضیح کوتاه و کد لازم آورده شده است:

Fade
عنصر به‌آرامی محو می‌شود تا وارد دید کاربر شود.

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

Fade-up
عنصر از پایین به بالا و همراه با افکت محو وارد می‌شود.

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

Fade-down
عنصر از بالا به پایین وارد دید می‌شود.

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

Fade-left
عنصر از سمت چپ صفحه وارد می‌شود و محو می‌شود.

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

Fade-right
عنصر از سمت راست وارد دید می‌شود.

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

Fade-up-right
عنصر به صورت مورب از پایین و سمت چپ وارد می‌شود.

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

Fade-up-left
عنصر به‌صورت مورب از پایین و راست وارد می‌شود.

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

Fade-down-right
عنصر از بالا و سمت چپ به سمت پایین و راست حرکت می‌کند.

<div data-aos="fade-down-right"></div>

Fade-down-left
عنصر از بالا به پایین و به سمت چپ وارد می‌شود.

<div data-aos="fade-down-left"></div>

Flip-left
عنصر با چرخش افقی از چپ ظاهر می‌شود.

<div data-aos="flip-left"></div>

Flip-right
عنصر از راست و با چرخش افقی وارد می‌شود.

<div data-aos="flip-right"></div>

Flip-up
عنصر با چرخش عمودی از پایین ظاهر می‌شود.

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

Flip-down
عنصر با چرخش عمودی از بالا ظاهر می‌شود.

<div data-aos="flip-down"></div>

Zoom-in
عنصر با افکت بزرگ‌نمایی (zoom) وارد دید می‌شود.

<div data-aos="zoom-in"></div>

Zoom-in-up
عنصر از پایین وارد می‌شود و هم‌زمان بزرگ‌نمایی می‌شود.

<div data-aos="zoom-in-up"></div>

Zoom-in-down
عنصر از بالا و همراه با zoom ظاهر می‌شود.

<div data-aos="zoom-in-down"></div>

Zoom-in-left
عنصر از چپ وارد شده و بزرگ می‌شود.

<div data-aos="zoom-in-left"></div>

Zoom-in-right
عنصر از راست وارد می‌شود و بزرگ‌نمایی دارد.

<div data-aos="zoom-in-right"></div>

Zoom-out
عنصر از حالت بزرگ به حالت نرمال ظاهر می‌شود.

<div data-aos="zoom-out"></div>

Zoom-out-up
عنصر از حالت بزرگ به کوچک وارد می‌شود و به بالا حرکت می‌کند.

<div data-aos="zoom-out-up"></div>

Zoom-out-down
عنصر از بالا وارد می‌شود و هم‌زمان کوچک می‌شود.

<div data-aos="zoom-out-down"></div>

Zoom-out-left
عنصر از چپ و با کوچک شدن ظاهر می‌شود.

<div data-aos="zoom-out-left"></div>

Zoom-out-right
عنصر از راست وارد شده و کوچک‌تر می‌شود.

<div data-aos="zoom-out-right"></div>

در ادامه تنظیمات متداولی که می‌ توان روی انیمیشن‌ها در AOS.js اعمال کرد رو توضیح می‌دهیم. این تنظیمات از طریق ویژگی‌های HTML (data-aos-*) قابل کنترل هستند و نیازی به نوشتن جاوااسکریپت نیست.

1. data-aos-delay

تأخیر در شروع انیمیشن (برحسب میلی‌ثانیه)
این ویژگی مشخص می‌کنه انیمیشن بعد از چند میلی‌ثانیه اجرا بشه.

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

2. data-aos-duration

مدت زمان اجرای انیمیشن (برحسب میلی‌ثانیه)
این ویژگی مدت اجرای انیمیشن رو مشخص می‌کنه.

<div data-aos="zoom-in" data-aos-duration="1000"></div>

3. data-aos-offset

فاصله‌ی شروع انیمیشن از پایین صفحه (پیش‌فرض 120px)
این مقدار تعیین می‌کنه که چند پیکسل قبل از اینکه عنصر وارد دید بشه، انیمیشن شروع بشه.

<div data-aos="fade-right" data-aos-offset="200"></div>

4. data-aos-easing

نوع منحنی شتاب (Easing Function)
برای کنترل نوع حرکت انیمیشن استفاده می‌شه. مقادیر رایج: ease, linear, ease-in, ease-out, ease-in-out

<div data-aos="flip-up" data-aos-easing="ease-in-out"></div>

5. data-aos-once

اجرای فقط یک‌بار (true/false)
اگر true باشه، انیمیشن فقط بار اول که عنصر وارد دید می‌شه اجرا می‌شه.

<div data-aos="fade-down" data-aos-once="true"></div>

6. data-aos-anchor-placement

نقطه‌ی مرجع برای اجرای انیمیشن
مشخص می‌کنه چه بخشی از عنصر یا صفحه مبنای آغاز انیمیشن باشه. مقادیر متداول:

top-bottom (پیش‌فرض)

center-bottom

bottom-bottom

top-center و …

<div data-aos="zoom-out" data-aos-anchor-placement="top-bottom"></div>

گزینه	توضیح	مقدار پیش‌فرض
`disable`	غیرفعال کردن AOS (می‌تواند تابع یا رشته باشد)	`false`
`startEvent`	رویدادی که باعث شروع AOS شود	`”DOMContentLoaded”`
`initClassName`	کلاسی که بعد از مقداردهی اولیه به `` اضافه می‌شود	`”aos-init”`
`animatedClassName`	کلاس CSS که هنگام اجرای انیمیشن به عنصر اضافه می‌شود	`”aos-animate”`
`useClassNames`	اگر `true` باشد، کلاس بر اساس نوع انیمیشن به عنصر اضافه می‌شود	`false`
`disableMutationObserver`	غیرفعال کردن رصد تغییرات DOM	`false`
`debounceDelay`	تأخیر در محاسبه مجدد هنگام resize	`50`
`throttleDelay`	تأخیر در اجرای انیمیشن هنگام scroll	`99`
`mirror`	اجرای انیمیشن هنگام اسکرول به بالا	`false`
`once`	اجرای یک‌بار انیمیشن برای هر عنصر	`false`
`offset`	فاصله شروع انیمیشن از پایین صفحه	`120`
`delay`	تأخیر پیش‌فرض (در ms)	`0`
`duration`	مدت پیش‌فرض انیمیشن‌ها (در ms)	`400`
`easing`	منحنی شتاب	`’ease’`
`anchorPlacement`	مکان مرجع شروع انیمیشن	`’top-bottom’`

شرطی کردن فعال/غیرفعال بودن AOS در برخی دستگاه‌ها:

مثال برای غیرفعال کردن انیمیشن‌ها در موبایل:

AOS.init({
  disable: function () {
    return window.innerWidth < 768;
  }
});

🔄 ری‌اینیشیال کردن (مثلاً بعد از لود محتوای Ajax)

اگر محتوای جدیدی به صفحه اضافه شد (مثلاً با AJAX)، باید AOS را مجدد بروزرسانی کنید:

AOS.refresh(); // فقط محاسبه مجدد موقعیت‌ها  
AOS.refreshHard(); // پاک‌سازی کامل و بارگذاری مجدد

پیکربندی کلی AOS (در JavaScript)

شما می‌توانید AOS را با تابع AOS.init({…}) پیکربندی کنید. این تابع معمولاً در فایل اصلی جاوااسکریپت یا درست بعد از لود صفحه در script نوشته می‌شود:


AOS.init({
  duration: 800,            // مدت پیش‌فرض انیمیشن‌ها (ms)
  easing: 'ease-in-out',    // نوع حرکت پیش‌فرض
  offset: 120,              // فاصله شروع انیمیشن از پایین صفحه
  delay: 0,                 // تأخیر پیش‌فرض (ms)
  once: false,              // اگر true باشد، انیمیشن فقط یک‌بار اجرا می‌شود
  mirror: false,            // اگر true باشد، هنگام اسکرول به بالا هم اجرا می‌شود
  anchorPlacement: 'top-bottom', // تعیین مبنای شروع انیمیشن
});

یک نمونه کد برای ایجاد افکت های انیمیشن برای css با استفاده از aos

<section class="hero">
  <div class="title" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000"></div>
  <div class="subtitle" data-aos="fade-up" data-aos-delay="400" data-aos-once="true"></div>
  <div class="features" data-aos="flip-left" data-aos-duration="800" data-aos-easing="ease-in-out"></div>
</section>

وردپرس کار