1.1.5 • Published 2 years ago

@kezoponk/scroller v1.1.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Scroller.js

Create responsive and pausable horizontally moving elements.
Use the main import for standard js, or import from dist/react for the included React component.

Installation

Install from the command line:

$ npm install @kezoponk/scroller

Install via package.json:

"@kezoponk/scroller": "1.1.5" 

Usage

Option / PropDescription and defaults
directionleft or right Default: left
speedAny number Turtle: 20 - Rabbit: 120Default: 20
animationAnimation type Default: linear
delayBetweenAnimationsMSDelay before starting next animation when last animation is finishedDefault: 0
finishAnimationBeforePauseDefault: false

Keep in mind eventlisteners to items in target div will get removed since cloneNode ignores them

Methods

These are available for access on the scroller instance/ref

  • pause() Also triggered when mouse enters the target element
  • unpause() Also triggered when mouse exits the target element
  • restore() Restore target div to state before scroller - can't be undone

Example with standard JS

<div id="scrolldiv">
  <button>Example</button>
  <button>Political</button>
  <button>App</button>
  <button>Programming</button>
  <button>Program</button>
  <button>School</button>
</div>
new Scroller(document.getElementById('scrolldiv'), { direction: 'left', speed: 10 });
  • Scroll to left
  • Moving 1px every 10ms
<Scroller direction="right" speed={100} animation="ease-in-out">
  <a href="/example"><button>Example</button></a>
  <a href="/political"><button>Political</button></a>
  <a href="/app"><button>App</button></a>
  <a href="/programming"><button>Programming</button></a>
  <a href="/program"><button>Program</button></a>
  <a href="/school"><button>School</button></a>
</Scroller>
  • Scroll to right
  • Moving 1px every 100ms
  • Ease-in-out animation on each item
1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

5 years ago

1.0.0

5 years ago