قالب HTML داشبورد مدیریتی Admiro

انگلیسی
2
سبد خرید
- ساعت چند رنگ
  
  500
- ایرپاد
  
  500.00
- مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
4
اطلاعیه‌ها مشاهده همه
- ۱۰ اردیبهشت ۱۴۰۳امروز
  
  محسن
  
  مد و فشن باید جذاب و سرگرم‌کننده باشد و نباید صرفاً به عنوان موضوعی علمی یا فکری برچسب‌گذاری شود.
- ۶ تیر ۱۴۰۳۱ ساعت پیش
  
  مارال
  
  اطمینان دارم که در سادگی نیز می‌توان شکوه و لوکس بودن را مشاهده کرد.
- ۱۳ مرداد ۱۴۰۳امروز
  
  لیلا
  
  احساس می‌کنم رویدادها برای ایجاد فرصت‌های جدید اتفاق می‌افتند.
- ۲۱ آبان ۱۴۰۳دیروز
  
  فریبا
  
  گاهی ساده‌ترین امور، عمیق‌ترین معنا را دارند.
نشانک
15
آوا

مدیر

کتابخانه AOS

نمونه انیمیشن AOS

Image description — توضیحات تصویر 1

Image description — توضیحات تصویر 2

Image description — توضیحات تصویر 3

Image description — توضیحات تصویر 4

Image description — توضیحات تصویر 5

Image description — توضیحات تصویر 6

Image description — توضیحات تصویر 7

Image description — توضیحات تصویر 8

Image description — توضیحات تصویر 9

Image description — توضیحات تصویر 10

Image description — توضیحات تصویر 11

Image description — توضیحات تصویر 12

Image description — توضیحات تصویر 13

Image description — توضیحات تصویر 14

Image description — توضیحات تصویر 15

Image description — توضیحات تصویر 16

Image description — توضیحات تصویر 17

Image description — توضیحات تصویر 18

Image description — توضیحات تصویر 19

Image description — توضیحات تصویر 20

Image description — توضیحات تصویر 21

Image description — توضیحات تصویر 22

Image description — توضیحات تصویر 23

Image description — توضیحات تصویر 24

Image description — توضیحات تصویر 25

Image description — توضیحات تصویر 26

Image description — توضیحات تصویر 27

Image description — توضیحات تصویر 28

Image description — توضیحات تصویر 29

Image description — توضیحات تصویر 30

Image description — توضیحات تصویر 31

Image description — توضیحات تصویر 32

Image description — توضیحات تصویر 33

راه‌اندازی AOS

// تابع زیر نمونه‌ای از نحوه راه‌اندازی reveal است

<script>
AOS.init();
< /script >

چگونه استفاده کنیم؟

همه کاری که باید انجام دهید این است که ویژگی data-aos را به عنصر HTML اضافه کنید، به این شکل:

< div data-aos="animation_name" >

تنظیمات پیشرفته

این تنظیمات می‌توانند روی عناصر خاص اعمال شوند یا به‌عنوان پیش‌فرض هنگام راه‌اندازی اسکریپت (در شیء options بدون بخش data-) تنظیم شوند.

ویژگی	توضیح	مقدار نمونه	مقدار پیش‌فرض
`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

انیمیشن

چندین انیمیشن از پیش تعریف‌شده وجود دارد که می‌توانید از آن‌ها استفاده کنید:

انیمیشن‌های محو شدن:
1. fade
2. fade-up
3. fade-down
4. fade-left
5. fade-right
6. fade-up-right
7. fade-up-left
8. fade-down-right
9. fade-down-left
انیمیشن‌های چرخشی:
1. flip-up
2. flip-down
3. flip-left
4. flip-right
انیمیشن‌های کشویی:
1. slide-up
2. slide-down
3. slide-left
4. slide-right
انیمیشن‌های بزرگ‌نمایی:
1. zoom-in
2. zoom-in-up
3. zoom-in-down
4. zoom-in-left
5. zoom-in-right
6. zoom-out
7. zoom-out-up
8. zoom-out-down
9. zoom-out-left
10. zoom-out-right

محل قرارگیری لنگر:

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

توابع Easing:

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