@kezoponk/scrollerjs v2.0.0

Scroller.js

Create pausable scrolling text with a simple one-liner

Installation

Install from the command line:

$ npm install @kezoponk/scroller

Install via package.json:

"@kezoponk/scroller": "1.0.1" 

Or download the dist/scroller.min.js manually

<script type="text/javascript" src="scroller.min.js"></script>

Getting Started

Important CSS

div-containing-buttons {
  overflow: hidden;
  position: /* relative or absolute */;
}

buttons-to-scroll {
  position: absolute;
}

Examples

<div class="scroll-left" id="scrolldiv">
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=example.html">Example</button>
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=political.html">Political</button>
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=app.html">App</button>
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=programming.html">Programming</button>
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=feminist.html">Feminist</button>
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=program.html">Program</button>
  <button name="scrollbtn" class="scrollbutton" onclick="window.location=school.html">School</button>
</div>

new Scroller('#scrolldiv', { direction: 'left', speed: 10 });

• Scroll to left
• Performance better, less smooth animation
• Moving 1px every 10ms

<div class="scroll-right">
  <a href="/a/"> <button class="scrollbutton">Example</button> </a>
  <a href="/b/"> <button class="scrollbutton">Political</button> </a>
  <a href="/c/"> <button class="scrollbutton">App</button> </a>
  <a href="/d/"> <button class="scrollbutton">Programming</button> </a>
  <a href="/e/"> <button class="scrollbutton">Feminist</button> </a>
  <a href="/f/"> <button class="scrollbutton">Program</button> </a>
  <a href="/g/"> <button class="scrollbutton">School</button> </a>
</div>

new Scroller('.scroll-right', { direction: 'right', speed: 100, performance: true });

• Scroll to right
• Multiple scrolls is too demanding
• Moving 1px every 100ms