لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
Jump.js: لایبرری کم حجم و مدرنی برای پیاده سازی افکت اسکرول نرم در وب سایت

Jump.js: لایبرری کم حجم و مدرنی برای پیاده سازی افکت اسکرول نرم در وب سایت

Jump.js یک لایبرری مدرن و کم حجم و بدون هیچ گونه وابستگی است که در صورت به کار گرفته شدن در سایت، امکان اسکرول نرمی را در معرض دید کاربران سایت قرار می دهد. این لایبرری با مد نظر داشتن نسخه ی ES6 جاوا اسکریپت نوشته شده است و کاربردهای مدرن جاوا اسکریپت مد نظر توسعه دهنده ی این لایبرری بوده است. جهت آشنایی بیشتر با جامپ جی اس، با سکان آکادمی همراه باشید.

طریقه نصب
شما می توانید با استفاده از NPM، جامپ جی اس را نصب کنید و آن را به وابستگی های package.json خود اضافه کنید:


$ npm install jump.js --save

طریق ی استفاده
برای استفاده از این لایبرری، ابتدا آن را به پروژه ی خود ایمپورت کرده سپس یک آبجکت از روی کلاس Jump بسازید:


// import Jump
import Jump from 'jump.js'

// create an instance
const Jump = new Jump()

برای این که جامپ را روی المنتی اعمال کنید، یک آی دی یا کلاس سی اس اس را باید به عنوان پارامتر ورودی در نظر گرفت:


Jump.jump(element, {
  // options...
})

Jump.jump('.selector', {
  // options...
})

برای اسکرول کردن هم از موقعیت فعلی به موقعیت مد نظر، عددی بر حسب پیکسل باید در نظر گرفت:


// down one viewport height
Jump.jump(window.innerHeight, {
  // options...
})

// up 100px
Jump.jump(-100, {
  // options...
})

آپشن ها
به خاطر داشته باشید که برای هر شیء ساخته شده از روی کلاس Jump، در نظر گرفتن مدت زمان انجام انیمیشن الزامی است؛ مدت زمان پیش فرض به شرح زیر است:


Jump.jump('.selector', {
  duration: 1000,
  offset: 0,
  callback: undefined,
  easing: (t, b, c, d) => {
    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    t /= d / 2
    if(t < 1) return c / 2 * t * t + b
    t--
    return -c / 2 * (t * (t - 2) - 1) + b
  }
})

همان طور که در کد بالا مشاهده می شود، مدت زمان بر حسب میلی ثانیه در نظر گرفته شده است.

منبع