متحرک سازی عناصر صفحه وب در هنگام اسکرول — راهنمای کاربردی

کتابخانه AOS (+) که اختصاری برای عبارت Animate On است امکان انیمیت کردن عناصر صفحه وب در زمان اسکرول کردن به سمت بالا یا پایین را فراهم ساخته است. اگر به سمت ابتدای صفحه اسکرول کنید، همه عناصر به حالت قبلی خود بازمی‌گردند و آماده انیمیت مجدد در صورت اسکرول به سمت پایین می‌شوند.

گام اول: نصب AOS با ابزارهای مدیریت پکیج

AOS را می‌توان با استفاده از npm نصب کرد:

yarn add aos@next

همچنین می‌توانید آن را با استفاده از yarn نیز نصب کنید:

or npm install --save aos@next

سپس اسکریپت و استایل ها را ایمپورت کرده و AOS را راه‌اندازی کنید:

1import AOS from 'aos';
2import 'aos/dist/aos.css'; // You can also use <link> for styles
3//..
4AOS.init(); // init the library

شیء AOS به صورت یک متغیر سراسری عرضه شده است. فعلاً سه متد در اختیار ما قرار دارد:

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

• Init – به راه‌اندازی AOS می‌پردازد.
• refresh – همه آفست‌ها و محل‌های عناصر را مجدداً محاسبه می‌کند. در زمان تغییر یافتن اندازه پنجره فراخوانی می‌شود.
• refreshHard – آرایه را با عناصر AOS مجدداً مقداردهی می‌کند و refresh را تحریک می‌کند. در زمان بروز تغییرات DOM که به عناصر AOS مرتبط هستند، فراخوانی می‌شود.

AOS به صورت پیش‌فرض تغییرات DOM را رصد می‌کند و اگر هر عنصر جدیدی به صورت ناهمگام بارگذاری شده باشد و یا چیزی از DOM حذف شده باشد، به صورت خودکار refreshHard را فرا می‌خواند.

در مرورگرهایی مانند اینترنت اکسپلورر که از MutationObserver پشتیبانی نمی‌کنند، ممکن است لازم باشد ()AOS.refreshHard را خودتان فراخوانی کنید. برای آغاز به کار با AOS برخی گام‌ها را باید بردارید که در بخش بعدی توضیح داده‌ایم.

گام دوم: مقداردهی AOS

گزینه‌های پیکربندی موجود به شرح زیر هستند:

1AOS.init();
2
3// You can also pass an optional settings object
4// below listed default settings
5AOS.init({
6  // Global settings:
7  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
8  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
9  initClassName: 'aos-init', // class applied after initialization
10  animatedClassName: 'aos-animate', // class applied on animation
11  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
12  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
13  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
14  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
15  
16
17  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
18  offset: 120, // offset (in px) from the original trigger point
19  delay: 0, // values from 0 to 3000, with step 50ms
20  duration: 400, // values from 0 to 3000, with step 50ms
21  easing: 'ease', // default easing for AOS animations
22  once: false, // whether animation should happen only once - while scrolling down
23  mirror: false, // whether elements should animate out while scrolling past them
24  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
25
26});

انیمیشن با استفاده از خصوصیت data-aos تنظیم می‌شود:

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

رفتار نیز با استفاده از خصوصیت‌های data-aos-* تعیین می‌شود:

1<div
2    data-aos="fade-up"
3    data-aos-offset="200"
4    data-aos-delay="50"
5    data-aos-duration="1000"
6    data-aos-easing="ease-in-out"
7    data-aos-mirror="true"
8    data-aos-once="false"
9    data-aos-anchor-placement="top-center"
10  >
11  </div>

انواع انیمیشن

گزینه‌ای برای به‌کارگیری انیمیشن‌های مختلف و easing-ها روی عناصر ارائه شده است. برخی از مثال‌هایی که می‌توان استفاده کرد، به شرح زیر هستند:

انیمیشن‌های محو شدن

• fade
• fade-up
• fade-down

انیمیشن‌های چرخش

• flip-up
• flip-down

انیمیشن‌های لغزیدن

• slide-up
• slide-down

انیمیشن‌های easing

• linear
• ease
• ease-in
• ease-out

افزودن انیمیشن‌های سفارشی

برخی اوقات انیمیشن‌های داخلی کافی نیستند. فرض کنید به یک کادر نیاز دارید که باید بسته به وضوح صفحه نمایش، انیمیشن‌های متفاوتی داشته باشد. روش انجام این کار به صورت زیر است:

1[data-aos="new-animation"] {
2  opacity: 0;
3  transition-property: transform, opacity;
4  &.aos-animate {
5    opacity: 1;
6  }
7  @media screen and (min-width: 768px) {
8    transform: translateX(100px);
9    &.aos-animate {
10      transform: translateX(0);
11    }
12  }
13}

از آن به صورت زیر در HTML استفاده می‌کنیم:

1<div data-aos="new-animation"></div>

بدین ترتیب سطح شفافیت عناصر صرفاً روی دستگاه‌های موبایل انیمیت می‌شود، روی عرض صفحه بالاتر از 768 پیکسل از سمت راست به چپ می‌لغزد. بدین منظور می‌توانید یک کتابخانه انیمیشن CSS بیرونی مانند Animate.css (+) را نیز ایمپورت کنید.

از animatedClassName برای تغییر رفتار پیش‌فرض AOS و بکارگیری نام‌های کلاس که درون data-aos در زمان اسکرول قرار می‌گیرند استفاده کنید.

1<div data-aos="fadeInUp"></div>
2AOS.init({
3  useClassNames: true,
4  initClassName: false,
5  animatedClassName: 'animated',
6});

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• آموزش JavaScript ES6 (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• معرفی جاوا اسکریپت ناهمگام — به زبان ساده
• واکشی داده ها از سرور در جاوا اسکریپت — راهنمای جامع

==