آموزش جامع AOS به فارسی

🏭معرفی و نصب

AOS (Animate On Scroll) کتابخانه‌ای سبک (~۱۳KB) است که المان‌های صفحه را هنگام ورود به viewport با افکت‌های زیبا نمایش می‌دهد — فقط با اضافه کردن data-aos به هر المان.

نصب

<!-- ۱. CSS را در <head> اضافه کنید -->
<link rel="stylesheet" href="aos.css">

<!-- ۲. JS را قبل از </body> اضافه کنید -->
<script src="aos.js"></script>

<!-- ۳. مقداردهی اولیه -->
<script>
  AOS.init();
</script>

استفاده پایه

<!-- ساده‌ترین حالت: فقط data-aos -->
<div data-aos="fade-up">
  هنگام اسکرول از پایین ظاهر می‌شوم
</div>

<!-- با تنظیمات بیشتر -->
<div data-aos="zoom-in"
     data-aos-duration="800"
     data-aos-delay="200"
     data-aos-easing="ease-out-back"
     data-aos-once="true">
  کارت با زوم ظاهر می‌شود
</div>

همه گزینه‌های AOS.init()

AOS.init({
  // تنظیمات پیش‌فرض برای همه المان‌ها
  duration: 400,           // مدت انیمیشن — ms (50 تا 3000)
  easing:   'ease',        // نوع easing پیش‌فرض
  delay:    0,             // تأخیر پیش‌فرض — ms
  offset:   120,           // فاصله از لبه viewport برای trigger
  once:     false,          // true = انیمیشن فقط یکبار
  mirror:   false,          // true = انیمیشن هنگام scroll به بالا هم
  anchorPlacement: 'top-bottom', // جایگاه پیش‌فرض trigger

  // غیرفعال کردن شرطی
  disable: false,          // true | 'mobile' | 'phone' | 'tablet' | function

  // container — برای scroll داخل یک element
  container: document.querySelector('#my-scroll-div')
});

ⓘ نحوه کار AOS: هنگام لود صفحه، AOS تمام المان‌های دارای data-aos را پیدا می‌کند. هر بار که اسکرول می‌کنید چک می‌کند کدام المان‌ها وارد viewport شده‌اند و کلاس aos-animate را اضافه می‌کند. CSS کتابخانه این کلاس را به انیمیشن تبدیل می‌کند.

📚مرجع کامل افکت‌ها

روی هر کارت کلیک کنید تا افکت را روی باکس نمایش ببینید. AOS دارای ۳۱+ افکت آماده است.

🎬 کلیک کنید

افکت انتخاب‌شده:

—

کد HTML:

—

Fade

Slide

Zoom

Flip

⚙تنظیمات هر المان

علاوه بر تنظیمات global در AOS.init()، می‌توانید برای هر المان به صورت جداگانه تنظیم کنید:

Attribute	مقادیر	توضیح
`data-aos`	نام افکت	نوع انیمیشن
`data-aos-duration`	50 تا 3000	مدت انیمیشن (ms)
`data-aos-delay`	0 تا 3000	تأخیر قبل از شروع (ms)
`data-aos-easing`	نام easing	نوع حرکت
`data-aos-once`	true / false	فقط یکبار؟
`data-aos-mirror`	true / false	انیمیشن هنگام scroll بالا
`data-aos-anchor`	CSS selector	trigger براساس المان دیگر
`data-aos-anchor-placement`	top-bottom و...	نقطه trigger در viewport
`data-aos-offset`	عدد (px)	offset اختصاصی

Easing های موجود

/* CSS standard easings */
data-aos-easing="linear"
data-aos-easing="ease"
data-aos-easing="ease-in"
data-aos-easing="ease-out"
data-aos-easing="ease-in-out"

/* AOS خاص */
data-aos-easing="ease-in-back"
data-aos-easing="ease-out-back"
data-aos-easing="ease-in-out-back"
data-aos-easing="ease-in-sine"
data-aos-easing="ease-out-sine"
data-aos-easing="ease-in-out-sine"
data-aos-easing="ease-in-quad"
data-aos-easing="ease-out-quad"
data-aos-easing="ease-in-out-quad"
data-aos-easing="ease-in-cubic"
data-aos-easing="ease-out-cubic"
data-aos-easing="ease-in-out-cubic"

▶ دمو: مقایسه زنده — اسکرول کنید

400ms
پیش‌فرض

1200ms
کند

ease-out-back
بازگشت

once=true
فقط یکبار

🌊ورود پلکانی (Stagger)

با اضافه کردن data-aos-delay متفاوت به هر المان، می‌توانید ورود cascade-وار و پلکانی بسازید. هر المان با یک تأخیر کمی بیشتر از قبلی ظاهر می‌شود.

روش دستی

<!-- هر کارت 100ms دیرتر از قبلی -->
<div data-aos="fade-up" data-aos-delay="0">کارت ۱</div>
<div data-aos="fade-up" data-aos-delay="100">کارت ۲</div>
<div data-aos="fade-up" data-aos-delay="200">کارت ۳</div>
<div data-aos="fade-up" data-aos-delay="300">کارت ۴</div>

روش JavaScript (پویا)

// اضافه کردن تأخیر به‌صورت برنامه‌نویسی
document.querySelectorAll('.card').forEach((el, i) => {
  el.setAttribute('data-aos', 'fade-up');
  el.setAttribute('data-aos-delay', i * 100);
});
AOS.refresh(); // بعد از تغییر attributes

▶ دمو: انواع stagger — اسکرول کنید

۱. ورود از پایین با تأخیر پلکانی (fade-up stagger):

تأخیر: 0ms

تأخیر: 120ms

تأخیر: 240ms

تأخیر: 360ms

۲. ورود از چپ و راست متناوب:

← از راست — آیتم ۱

→ از چپ — آیتم ۲

← از راست — آیتم ۳

→ از چپ — آیتم ۴

۳. زوم پلکانی (zoom-in stagger):

⭐

💎

🚀

🎨

⚡

📏anchor-placement

data-aos-anchor-placement تعیین می‌کند که انیمیشن در چه لحظه‌ای trigger شود. این مقدار از دو بخش تشکیل شده: لبه المان + لبه viewport.

فرمت

<!-- {edge-of-element}-{edge-of-viewport} -->
data-aos-anchor-placement="top-bottom"    <!-- وقتی top المان به bottom viewport رسید (پیش‌فرض) -->
data-aos-anchor-placement="top-center"    <!-- وقتی top المان به وسط viewport رسید -->
data-aos-anchor-placement="top-top"       <!-- وقتی top المان به top viewport رسید -->
data-aos-anchor-placement="center-bottom" <!-- وقتی center المان به bottom viewport رسید -->
data-aos-anchor-placement="bottom-bottom" <!-- وقتی bottom المان به bottom viewport رسید -->

نمودار بصری

روی هر گزینه کلیک کنید:

top
top

top
center

top
bottom
(پیش‌فرض)

center
top

center
center

center
bottom

bottom
top

bottom
center

bottom
bottom

انتخاب‌شده:

top-bottom

وقتی بالای المان به پایین viewport رسید — یعنی اولین لحظه‌ای که المان وارد صفحه می‌شود. این پیش‌فرض است.

data-aos-anchor-placement="top-bottom"

💡 کاربرد عملی: برای المان‌های بزرگ (مثل banner های بلند) از center-bottom یا top-center استفاده کنید تا انیمیشن وقتی واقعاً در دید کاربر است اجرا شود، نه وقتی تازه لبه‌اش وارد صفحه شده.

🎨انیمیشن سفارشی (Custom)

AOS فقط کلاس aos-animate را اضافه و حذف می‌کند. این یعنی می‌توانید هر انیمیشن CSS دلخواهی تعریف کنید و آن را از طریق AOS اجرا کنید.

الگوی تعریف

/* حالت اولیه (قبل از انیمیشن) */
[data-aos="my-animation"] {
  transform: scale(0.5) rotate(-15deg);
  opacity: 0;
  transition-property: transform, opacity;
  /* transition-duration و easing از AOS می‌آید */
}

/* حالت نهایی (بعد از انیمیشن — وقتی .aos-animate اضافه می‌شود) */
[data-aos="my-animation"].aos-animate {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

مثال‌های عملی

/* ۱. Blur — ظاهر شدن از حالت تار */
[data-aos="my-blur"]              { filter: blur(10px); opacity: 0; transition-property: filter, opacity; }
[data-aos="my-blur"].aos-animate  { filter: blur(0);   opacity: 1; }

/* ۲. Skew — کج‌شده ظاهر شدن */
[data-aos="my-skew"]             { transform: skewX(-20deg) translateX(-40px); opacity: 0; transition-property: transform, opacity; }
[data-aos="my-skew"].aos-animate { transform: skewX(0deg) translateX(0);         opacity: 1; }

/* ۳. استفاده --  */
<div data-aos="my-blur"  data-aos-duration="800">محو‌شونده</div>
<div data-aos="my-skew" data-aos-duration="600">کج‌شونده</div>

▶ دمو: انیمیشن‌های سفارشی — اسکرول کنید

🌐 Scale + Rotate
انیمیشن سفارشی

📋 Skew Entrance
انیمیشن سفارشی

🌫 Blur to Clear
انیمیشن سفارشی

🔧 نکته مهم: فقط transition-property را در CSS خود تعریف کنید. مقادیر transition-duration و transition-timing-function توسط AOS از attribute های data-aos-duration و data-aos-easing اعمال می‌شوند.

💻JavaScript API

متدهای اصلی

// مقداردهی اولیه
AOS.init({ duration: 600, once: true });

// ریفرش — بعد از تغییر DOM یا resize
AOS.refresh();

// ریفرش کامل — محاسبه مجدد همه چیز از صفر
AOS.refreshHard();

// غیرفعال کردن
AOS.init({ disable: true });

// غیرفعال روی موبایل
AOS.init({ disable: () => window.innerWidth < 768 });

// غیرفعال روی phone و tablet
AOS.init({ disable: 'phone' });   // < 480px
AOS.init({ disable: 'tablet' });  // < 1024px
AOS.init({ disable: 'mobile' });  // phone + tablet

رویدادهای JavaScript

// رویداد ورود به viewport
document.addEventListener('aos:in', ({ detail }) => {
  console.log('وارد viewport شد:', detail);
  // detail = المان DOM
});

// رویداد خروج از viewport
document.addEventListener('aos:out', ({ detail }) => {
  console.log('از viewport خارج شد:', detail);
});

// روی یک المان خاص
document.querySelector('#my-el').addEventListener('aos:in', e => {
  // این المان وارد شد
});

اضافه کردن AOS به محتوای پویا (AJAX)

// بعد از اینکه محتوای جدید به DOM اضافه شد
async function loadContent() {
  const data = await fetch('/api/posts').then(r => r.json());

  data.forEach(post => {
    const el = document.createElement('div');
    el.setAttribute('data-aos', 'fade-up');
    el.textContent = post.title;
    container.appendChild(el);
  });

  AOS.refresh();  // ← حتماً بعد از اضافه کردن محتوا
}

▶ دمو: رویدادهای AOS (aos:in / aos:out)

👁 این کارت را scroll کنید
mirror=true

لاگ رویدادها:

// منتظر رویداد...

🛠پروژه‌های واقعی

در ادامه چند الگوی پرکاربرد با AOS می‌بینید که در landing page ها و سایت‌های واقعی استفاده می‌شوند.

۱. Hero Section

محصول جدید 🔥

بهترین ابزار برای تیم شما

با کمترین تلاش، بیشترین نتیجه را بگیرید.

۲. Feature Cards

⚡

سریع

عملکرد بهینه در تمام دستگاه‌ها

🔒

امن

رمزنگاری end-to-end

🌐

سازگار

یکپارچه با همه ابزارها

📚

مستندات

راهنمای جامع فارسی

۳. Timeline

۱

ثبت‌نام

حساب کاربری خود را در کمتر از یک دقیقه بسازید

۲

تنظیم

پروژه‌های خود را اضافه و تنظیم کنید

۳

نتیجه

به نتایج واقعی دست پیدا کنید

۴. Testimonials

⭐⭐⭐⭐⭐

«بهترین کتابخانه‌ای که تاکنون استفاده کردم. سادگی استفاده فوق‌العاده است.»

علی محمدی — توسعه‌دهنده فرانت‌اند

⭐⭐⭐⭐⭐

«AOS تجربه کاربری سایت ما را کاملاً متحول کرد. واقعاً ارزش استفاده دارد.»

سارا احمدی — طراح UI/UX

⭐⭐⭐⭐⭐

«در پروژه‌های Laravel از AOS استفاده می‌کنم. هیچ تنظیم خاصی نیاز ندارد.»

رضا کریمی — توسعه‌دهنده Full Stack

⚖بهترین روش‌ها و Performance

دسترس‌پذیری (Accessibility)

AOS به‌صورت خودکار از @media (prefers-reduced-motion: reduce) پشتیبانی نمی‌کند. باید خودتان آن را مدیریت کنید:

// ✅ بهترین روش
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
AOS.init({
  disable: prefersReducedMotion,
  duration: prefersReducedMotion ? 0 : 600
});

عملکرد (Performance)

از once: true استفاده کنید — در صفحات طولانی جلوی محاسبات مجدد را می‌گیرد.
تعداد انیمیشن‌های همزمان را محدود کنید — بیش از ۵-۶ المان در یک نمای متحرک آزاردهنده است.
از transform و opacity در انیمیشن‌های سفارشی استفاده کنید — GPU-accelerated هستند.
روی موبایل غیرفعال کنید — disable: 'phone'

چه موقع از AOS استفاده نکنید

اگر به کنترل دقیق Timeline نیاز دارید → از Anime.js یا GSAP استفاده کنید
اگر انیمیشن‌ها باید با دقت میلی‌ثانیه هماهنگ باشند → AOS مناسب نیست
برای SVG animation → Anime.js بهتر است

⚠ AOS.refresh() را فراموش نکنید! هر بار که DOM تغییر می‌کند (اضافه یا حذف المان، تغییر ارتفاع، AJAX)، باید AOS.refresh() صدا کنید. در غیر اینصور AOS موقعیت المان‌ها را اشتباه محاسبه می‌کند.

💡 ترکیب AOS با Alpine.js یا Vue: بعد از mount شدن کامپوننت، AOS.refresh() فراخوانی کنید:

mounted() { this.$nextTick(() => AOS.refresh()); }  // Vue
x-init="$nextTick(() => AOS.refresh())"                // Alpine.js

🚀زمین بازی کد (Playground)

المان‌ها را با اتریبیوت‌های data-aos بساز و داخل پیش‌نمایش اسکرول کن تا انیمیشن اجرا شود. تنظیمات را در AOS.init() تغییر بده و ▶ اجرا را بزن. نسخهٔ ۲.۳.۴ آفلاین بارگذاری می‌شود.

💡 AOS با اسکرول فعال می‌شود؛ داخل کادر نتیجه اسکرول کن. با offset:0 المان‌ها به‌محض دیده‌شدن اجرا می‌شوند.