1. خانه
2. مقاله
3. متحرک سازی در هنگام اسکرول کردن

متحرک سازی در هنگام اسکرول کردن

AOS یک ابزار متحرک سازی در زمان اسکرول کردن (Animate on Scroll) برای طراحی سایت می باشد.

نصب کتابخانه AOS

شما می توانید با Bower یا NPM این کتابخانه را نصب کنید.

Bower

    bower install aos --save

NPM

    npm install aos --save

سپس دو کتابخانه javascript و stylesheet آنرا به سورس برنامه اضافه می کنیم.

<link rel="stylesheet" href="bower_components/aos/dist/aos.css">

<script src="bower_components/aos/dist/aos.js"></script>

اگر خواستید از CDN استفاده کنید آدرس آنها به شکل زیر است.

CSS:

    <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

JS:

    <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

شروع کا با AOS

برای کار با این کتابخانه باید attribute زیر را به آن اضافه کنیم:

    data-aos="animation_name"

به جای animation_name نوع متحرک سازی خود را انتخاب می کنید مانند: “fade”, “fade-up” , “fade-down-left”,“flip-up”, “flip-left”, “slide-down”, “slide-right” , ... به مثالزیر توجه کنید:

<div class="box a" data-aos="fade-up">
  <h2>Animated using fade-up.</h2>
</div>
<div class="box b" data-aos="flip-down">
  <h2>Animated using flip-down.</h2>
</div>
<div class="box b" data-aos="zoom-in">
  <h2>Animated using zoom-in.</h2>
</div>
</pre>

تنظیمات متحرک سازی در AOS Data Attributes

• data-aos-offset : با این Attribute می توانید انیمشن را دورتر یا زودتر در طراحی سایت اجرا کنید.
• data-aos-duration: با این attribute می توانید مدت زمان انیمشن را از 300 تا 3000 با فاصله زمانی 50ms در طراحی سایت تعریف کنید.
• data-aos-easing: این attribute برای فاصله زمانی بین عناصر در طراحی سایت استفاده می شود.

اطلاعات بیشتر را از لینک زیر پیگیری کنید:

GitHub

• data-aos-anchor: این attribute موقعیت مکانی عنصر را نصبت به عناصر دیگر در طراحی سایت مشخص می کند. و مقدار پیش فرض آن Null است.
• data-aos-anchor-placement: با این attribute می توانید موقعیت مکانی عناصر را نسبت به بالا و پایین در طراحی سایت مشخص کنید.
• data-aos-once: با این attribute می توانید نسبت به اجرای یک عنصر، اجرای انیمشن عنصر دیگر را در طراحی سایت مشخص کنید.

برخی دیگر از امکانات

شما می توانید تنظیمات دیگری مانند تاخیر و مدت زمان نمایش را در تابع init انجام دهید به مثال زیر توجه کنید:

AOS.init({
  offset: 200,
  duration: 800,
  easing: 'ease-in-quad',
  delay: 100,
});

یا عناصر را در موبایل و تبلت قابل نمایش کنید به مثال زیر توجه کنید:

AOS.init({
  disable: 'mobile'
});

AOS.init({
  disable: function () {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;
  }
});