Neutrinos Peludos Magnéticos

    cubic-scroll-to

    2.0.2 • Public • Published

    cubic-scroll-to

    scrollTo with transition effect;

    It's as simple and powerful as using the CSS cubic-bezier() function.Parameter generation

    Why

    1. 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-to

    Usage

    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.

    welcome star

    Install

    npm i cubic-scroll-to

    DownloadsWeekly Downloads

    12

    Version

    2.0.2

    License

    ISC

    Unpacked Size

    23.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar