انیمیشن AOS

  2. انیمیشن
  3. انیمیشن AOS
مثال انیمیشن AOS
انیمیشن AOS را راه اندازی کنید
// The Below Function is example of how to initlize reveal
<script>
  AOS.init();
< /script >
چگونه از آن استفاده کنیم؟
تنها کاری که باید انجام دهید این است که ویژگی data-aos را به عنصر html اضافه کنید، مانند:
< div data-aos="animation_name" >
تنظیمات پیشرفته
این تنظیمات را می توان هم بر روی عناصر خاص تنظیم کرد و هم به عنوان پیش فرض در هنگام مقداردهی اولیه اسکریپت (در شیء گزینه ها بدون بخش داده).
صفت شرح ارزش نمونه ارزش پیش فرض
data-aos-offset تغییر افست برای فعال کردن انیمیشن ها دیر یا زود (px) 200 120
data-aos-duration * مدت زمان انیمیشن (ms) 600 400
data-aos-easing عملکرد زمان بندی را برای سهولت عناصر به روش های مختلف انتخاب کنید ease-in-sine ease
data-aos-delay انیمیشن تاخیری (ms) 300 0
data-aos-anchor عنصر لنگر، که آفست آن به‌جای افست عناصر واقعی، برای راه‌اندازی انیمیشن شمارش می‌شود #selector null
data-aos-anchor-placement قرار دادن لنگر - کدام یک از موقعیت های عنصر روی صفحه باید انیمیشن را فعال کند top-center top-bottom
data-aos-once انتخاب کنید که انیمیشن یک بار اجرا شود یا هر بار که به عنصر بالا/پایین بروید true false
انیمیشن
چندین انیمیشن از پیش تعریف شده وجود دارد که می توانید از قبل استفاده کنید:
  • انیمیشن های محو شدن :
    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • انیمیشن های تلنگر :
    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • انیمیشن های اسلاید :
    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • انیمیشن های زوم:
    • zoom-in
    • zoom-in-up
    • zoom-in-down
    • zoom-in-left
    • zoom-in-right
    • zoom-out
    • zoom-out-up
    • zoom-out-down
    • zoom-out-left
    • zoom-out-right
موقعیت لنگر :
  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top
توابع تسهیل :
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart