متحرک سازی عناصر صفحه وب در هنگام اسکرول – راهنمای کاربردی
کتابخانه AOS (+) که اختصاری برای عبارت Animate On است امکان انیمیت کردن عناصر صفحه وب در زمان اسکرول کردن به سمت بالا یا پایین را فراهم ساخته است. اگر به سمت ابتدای صفحه اسکرول کنید، همه عناصر به حالت قبلی خود بازمیگردند و آماده انیمیت مجدد در صورت اسکرول به سمت پایین میشوند.
گام اول: نصب AOS با ابزارهای مدیریت پکیج
AOS را میتوان با استفاده از npm نصب کرد:
yarn add aos@next
همچنین میتوانید آن را با استفاده از yarn نیز نصب کنید:
or npm install --save aos@next
سپس اسکریپت و استایل ها را ایمپورت کرده و AOS را راهاندازی کنید:
شیء AOS به صورت یک متغیر سراسری عرضه شده است. فعلاً سه متد در اختیار ما قرار دارد:
- Init – به راهاندازی AOS میپردازد.
- refresh – همه آفستها و محلهای عناصر را مجدداً محاسبه میکند. در زمان تغییر یافتن اندازه پنجره فراخوانی میشود.
- refreshHard – آرایه را با عناصر AOS مجدداً مقداردهی میکند و refresh را تحریک میکند. در زمان بروز تغییرات DOM که به عناصر AOS مرتبط هستند، فراخوانی میشود.
AOS به صورت پیشفرض تغییرات DOM را رصد میکند و اگر هر عنصر جدیدی به صورت ناهمگام بارگذاری شده باشد و یا چیزی از DOM حذف شده باشد، به صورت خودکار refreshHard را فرا میخواند.
در مرورگرهایی مانند اینترنت اکسپلورر که از MutationObserver پشتیبانی نمیکنند، ممکن است لازم باشد ()AOS.refreshHard را خودتان فراخوانی کنید. برای آغاز به کار با AOS برخی گامها را باید بردارید که در بخش بعدی توضیح دادهایم.
گام دوم: مقداردهی AOS
گزینههای پیکربندی موجود به شرح زیر هستند:
انیمیشن با استفاده از خصوصیت data-aos تنظیم میشود:
رفتار نیز با استفاده از خصوصیتهای data-aos-* تعیین میشود:
انواع انیمیشن
گزینهای برای بهکارگیری انیمیشنهای مختلف و easing-ها روی عناصر ارائه شده است. برخی از مثالهایی که میتوان استفاده کرد، به شرح زیر هستند:
انیمیشنهای محو شدن
- fade
- fade-up
- fade-down
انیمیشنهای چرخش
- flip-up
- flip-down
انیمیشنهای لغزیدن
- slide-up
- slide-down
انیمیشنهای easing
- linear
- ease
- ease-in
- ease-out
افزودن انیمیشنهای سفارشی
برخی اوقات انیمیشنهای داخلی کافی نیستند. فرض کنید به یک کادر نیاز دارید که باید بسته به وضوح صفحه نمایش، انیمیشنهای متفاوتی داشته باشد. روش انجام این کار به صورت زیر است:
از آن به صورت زیر در HTML استفاده میکنیم:
بدین ترتیب سطح شفافیت عناصر صرفاً روی دستگاههای موبایل انیمیت میشود، روی عرض صفحه بالاتر از 768 پیکسل از سمت راست به چپ میلغزد. بدین منظور میتوانید یک کتابخانه انیمیشن CSS بیرونی مانند Animate.css (+) را نیز ایمپورت کنید.
از animatedClassName برای تغییر رفتار پیشفرض AOS و بکارگیری نامهای کلاس که درون data-aos در زمان اسکرول قرار میگیرند استفاده کنید.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- آموزش JavaScript ES6 (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- معرفی جاوا اسکریپت ناهمگام — به زبان ساده
- واکشی داده ها از سرور در جاوا اسکریپت — راهنمای جامع
==
