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 -

Please, ورود or عضویت to view URLs content!

t /= d / 2
if(t < 1) return c / 2 * t * t + b
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
})
همان طور که در کد بالا مشاهده می شود، مدت زمان بر حسب میلی ثانیه در نظر گرفته شده است.