@kezoponk/scroller

    1.1.1 • Public • Published

    Scroller.js

    Create responsive, pausable moving elements, left or right, with a simple one-liner

    Installation

    Install from the command line:

    $ npm install @kezoponk/scroller

    Install via package.json:

    "@kezoponk/scroller": "1.1.1" 

    Or download Scroller.min.js or AnimatedScroller.min.js from dist/
    AND the dependency css-element-queries.zip -> ResizeSensor.js

    <script src="css-element-queries/src/ResizeSensor.js"></script>
    <script src="Scroller.min.js"></script>

    Usage

    Options Usage
    direction Left or right
    speed Turtle: 20 - Rabbit: 120
    animation
     AnimatedScroller
    Animation type, works with cubic-bezier
    Default: ease-in-out
    delay
     AnimatedScroller
    Delay before starting next animation when last animation is finished
    Default: 0
    finishAnimationBeforePause
     AnimatedScroller
    Default: false

    new Scroller OR AnimatedScroller('div-containing-items', { Options })

    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

    • pause()
      Also triggered once the scroller enters the target div
    • unpause()
      Also triggered once the scroller exit the target div
    • restore()
      Restore target div to state before implementing scroller

    Example 1 / 3

    <div id="scrolldiv" class="scroll-left">
      <button class="scrollbutton">Example</button>
      <button class="scrollbutton">Political</button>
      <button class="scrollbutton">App</button>
      <button class="scrollbutton">Programming</button>
      <button class="scrollbutton">Feminist</button>
      <button class="scrollbutton">Program</button>
      <button class="scrollbutton">School</button>
    </div>
    new Scroller('#scrolldiv', { direction: 'left', speed: 10 });
    • Scroll to left
    • Moving 1px every 10ms

    Example 2 / 3

    <div id="animated" style="display:flex; flex-direction:column; max-height:100px">
      <a href="/example"><button style="min-height:50px">Example</button></a>
      <a href="/political"><button style="min-height:30px">Political</button></a>
      <a href="/app"><button style="min-height:30px">App</button></a>
      <a href="/programming"><button style="min-height:30px">Programming</button></a>
      <a href="/feminist"><button style="min-height:30px">Feminist</button></a>
      <a href="/program"><button style="min-height:30px">Program</button></a>
      <a href="/school"><button style="min-height:30px">School</button></a>
    </div>
    new AnimatedScroller('#animated', { direction: 'right', speed: 100, animation:'linear', delay: 500 });
    • Scroll to right
    • Moving 1px every 100ms
    • Div is 50px height
    • Ease-in-out animation on each item
    • 0.5s delay between each iteration

    Example 3 / 3

    <div class="scroll-right">
      <button onclick="window.location=example.html">Example</button>
      <button onclick="window.location=political.html">Political</button>
      <button onclick="window.location=app.html">App</button>
      <button onclick="window.location=programming.html">Programming</button>
      <button onclick="window.location=feminist.html">Feminist</button>
      <button onclick="window.location=program.html">Program</button>
      <button onclick="window.location=school.html">School</button>
    </div>
    new Scroller('.scroll-right', { direction: 'right', speed: 100 });
    • Scroll to right
    • Moving 1px every 100ms

    Install

    npm i @kezoponk/scroller

    DownloadsWeekly Downloads

    16

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • kezoponk