cubic-scroll-to
scrollTo with transition effect;
It's as simple and powerful as using the CSS cubic-bezier() function.Parameter generation
Why
- other libraries need complex calculation if they want to control rolling speed. This library implements cubic Bezier formula. You can customize the rolling effect you want by simply passing in parameters like CSS cubic-bezier().
Install
npm i cubic-scroll-toUsage
import cubicScrollTo from "cubic-scroll-to";
const el = document.querySelector(".scroll-box");
const option = {
el: el,
cubic: [0.75, 0.16, 0.27, 0.88],
totalTime: 2000,
};
const cubic = new cubicScrollTo(option);
cubic.scrollTo(500, 1000);Options
Init
| parameter | explain | type | default |
|---|---|---|---|
| el | Parent element | Element | window |
| cubic | Bezier curve parameters | Array | [0.35, 0.13, 0.42, 1] Parameter generation |
| totalTime | Rolling time | Number | 500 |
scrollTo（recommend）
Use current position as the starting point of rolling
const cubic = new cubicScrollTo();
cubic.scrollTo(500, 1000);| parameter | explain | type | default |
|---|---|---|---|
| targetPositionX | X-axis coordinate of target position | Number | 0 |
| targetPositionY | Y-axis coordinate of target position | Number | 0 |
scrollToX
Scroll horizontally, customize the start and end X-axis positions
const cubic = new cubicScrollTo();
cubic.scrollToX(500, 1000);| parameter | explain | type | default |
|---|---|---|---|
| currentPositionX | The x-axis coordinate of the current position | Number | X-axis coordinate of current position |
| targetPositionX | X-axis coordinate of target position | Number | 0 |
scrollToY
Scroll vertically to customize the start and end Y-axis positions
const cubic = new cubicScrollTo();
cubic.scrollToY(500, 1000);| parameter | explain | type | default |
|---|---|---|---|
| currentPositionY | Y-axis coordinate of current position | Number | Y-axis coordinates of current position |
| targetPositionY | Y-axis coordinate of target position | Number | 0 |
scrollFromTo
Define the start and end coordinate points of the input
const cubic = new cubicScrollTo();
cubic.scrollFromTo({ x: 0, y: 0 }, { x: 500, y: 500 });| parameter | explain | type | default |
|---|---|---|---|
| currentPosition | The coordinates of the current position point | Object | Current position coordinate point |
| targetPosition | Coordinates of the target location point | Object | {x:0,y:0} |
Other
Open the test folder and view it test.html File for more use cases.