بخش های اصلی

AOS: کتابخانه CSS, کشیده شدن آیتم ها در صفحه با Scroll کردن

بخش: توسعه وب 239 بار مشاده شده یکشنبه ۸ اسفند ۹۵ 0 نظر ارسال شده
AOS: کتابخانه CSS, کشیده شدن آیتم ها در صفحه با Scroll کردن

آیا شما تا به حال آن دسته از صفحات وب طولانی رو که باDown  Scroll ( یعنی همانطور که اطلاعات را می خونید و به پایین می آیید)کردنشان انیمیشن های مختلفی را در انها مشاهده می کنید را دیده اید؟ من دوست دارم که Plugin ( افزونه یا به عبارتی  برنامه هاي خارج از مرورگرها هستند که براي افزايش کارآيي يک مرورگر به آن متصل مي شوند.) را که تمام این انیمیشن ها را به راحتی و به کمک CSS  راه اندازی کنید را با شما به اشتراک بگذارم.

 

مشکلات کتابخانه های دیگر

در شرکت قبلی از WOW.is  یا کتابخانه های مشابه دیگر برای animate کردن عناصراستفاده می کردیم. برای پروژه های ساده بسیار مناسب بود، اما در طراحی سایت های بزرگتر نیاز داشتیم که کنترل بیشتری بر انچه که اتفاق می افتاد داشته باشیم. در تمام کتابخانه های عمومی، انیمیشن به طور کامل توسط جاوا اسکریپت با قرار دادن  CSSدرون خطی انجام می شود.  سبک های (Style) درون خطی خوب نیستند. کنترل کردن و Override (تغییر دادن) آنها سخت است. هرچند در بعضی موارد set کردن انها با استفاده از JavaScript مناسب است ولی بهتره که بگذاریم در همان جایی که بهش تعلق دارند بمانند و تمام چیزهای مربوط به CSS رو در فایل CSS مدیریت کنیم. من تصمیم دارم یک کتابخانه با هدف خالص - تشخیص موقعیت عناصر و سپس اضافه کردن کلاس های مناسب وقتی که آنها ظاهر می شود ایجاد کنم.

 

کنترل انیمیشن ها به طور کامل در CSS

من می خواستم با کتابخانه جدیدم تقسیم وظایف کنم:

  • تمام منطق در داخل جاوا اسکریپت
  • تمام انیمیشن ها در CSS

این به شما این قابلیت را میدهد که انیمیشن مورد نظر خود را به راحتی اضافه کنید، و انها را مطابق viewport (ناحیه قابل دید توسط کاربر) تغییر دهید.

 

AOSچگونه کار می کند

ایده پشت AOS بسیار ساده است. به تمام المان ها و موقعیت شان براساس تنظیماتی که انجام داده اید نگاه کنید. سپس کلاس aos-animate را اضافه/ حذف کنید. البته در عمل به این سادگی ها نیست. اما ایده پشت AOS به همین سادگی است. تمام جنبه های انیمیشن با CSS مدیریت می شود.

 

مثال انیمیشن در CSS

انیمیشن های مختلف زیادی برای استفاده وجود دارد. که البته ساختن یک نمونه جدید هم ساده است. به مثال زیر توجه کنید:

[aos="fade"] {
  opacity: 0;
  transition-property: opacity;
}

[aos="fade"].aos-animate {
  opacity: 1;
}

لازم نیست که نگران مدت زمان و یا تاخیر باشید. در CSS، شما تنها:

  • Style هایی را برای attribute (صفت) aos به همراه نام انیمیشن خود اضافه کنید
  • transition-property (نام خصوصیت CSS ی است که اگر به نحوی تغییر کند، انتقال یا transition صورت می گیرد ) را set کنید.( به طور پیش فرض اینطور است. اگر انتقال به ویزگی های مورد نظر را محدود کنید بنابراین سازگاری و قابلیت پیش بینی بیشتری را شاهد خواهید بود )
  • post transition property را در  .aos- animatedاضافه کنید

چیزهایی مثل duration/delay/easing به طور مستقل از انیمیشن تنظیم شده است.

استفاده از easing میتواند به افکت های شما روح تازه ای بدهد. easing با استفاده از تغییر در شتاب و پیشرفت انیمیشن اینکار را انجام میدهد.

 

مثال HTML

<div class="some-item" aos="fade">Example Element</div>​
و یا با یک مدت زمان انتقال مختلف:
<div class="some-item" aos="fade" aos-duration="500">Example Element</div>
 
** نکته: ** شما می توانید data-aos  به جای aos استفاده کنید تا HTML خود را به درستی معتبرسازی کنید.

نمایش زنده

با انیمیشن های مختلف

با استفاده از Anchor (لنگر)

Anchor به معنای لنگر می باشد و Anchor Text به معنی متنی است که پیوندی به آن لینک داده شده است. Anchor Text به کلمه ای گفته می شود که قابلیت کلیک کردن داشته باشد و یا HyperLink باشد.

با استفاده از جاگذاری Anchor و easing  های مختلف:

با انیمیشن های سفارشی ساده:

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

  • Anchor: یک المان را براساس موقعیت المان دیگرحرکت می دهد.
  • anchor placement: یک المان را براساس موقعیتش روی صفحه حرکت می دهد. مجبور نیست وقتی  وارد صفحه می شود حرکت کند به عنوان مثال وقتی که انتهای یک المان به وسط صفحه برسد حرکت می کند.
  • both way animations: به طور کلی المان ها براساس تغییری که شما به scroll (بالا و پایین کردن scroll bar)می دهید حرکت می کنند. شما می توانید بگویید که یک المان فقط یک بار حرکت کند.
  • easy disabling: شما می توانید انیمیشن ها را در وسایلی مثل موبایل و با استفاده از گزینه های از قبل تعریف شده مثل موبایل/ تلفن/ تبلت و یا توسط شرایط/ کاربرد مرسوم غیر فعال کنید.
  • async aware: مجددا موقعیت المان ها را با تغییرات DOM محاسبه می کند. بنابراین بعد از بارگذاری چیزی با استفاده از Ajax نیاز نیست نگران چیزی باشید (مگر اینگه IE9 را ساپورت کنید زیرا به mutation observer نیاز دارد)
  • no dependencies : این کتابخانه در JS نوشته شده و وابستگی به چیزی ندارد.

AOS به طور کامل Open source است، بنابراین اگر شما یک ایده جالبی دارید و یا چیزی دارید که آن طور که انتظار داشتید کار نمی کند، مسئله را باز کنید، شما را در GitHub می بینم (یعنی اگر مشکلی دارید می توانید با مراجعه به سایتGitHub در قسمت Issue ها مشکلتون رو مطرح کنید)! هر نوع مشارکتی باعث افتخار است.

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد