Jump.js یک لایبرری مدرن و کم‌حجم بدون هیچ‌گونه وابستگی است که در صورت به کار گرفته شدن در سایت، امکان اسکرول نرمی را در معرض دید کاربران سایت قرار می‌دهد (این لایبرری با مد نظر داشتن نسخهٔ ES6 جاوااسکریپت نوشته شده و کاربردهای مدرن این زبان مد نظر دولوپرهای این لایبرری بوده است.)
طریقهٔ نصب Jump.js
می‌توانید با استفاده از 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
}
})
همان‌طور که در کد بالا مشاهده می‌شود، مدت زمان بر حسب میلی‌ثانیه در نظر گرفته شده است.
