npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

skrolr

v1.1.0

Published

Lightweight JavaScript / TypeScript library that makes creating dynamic scrollers easy

Downloads

4

Readme

NB: skrolr relies on CSS transitions, and has no JavaScript backup. All modern browsers support this, but IE9- does not. Everything should work in IE10+, as well as any modern version of Firefox, Chrome, and Safari (as they auto-update). Also, the jQuery library is only included for compatibility purposes. There is no requirement to use jQuery with skrolr.

skrolr library

Live demo

GitHub | npm

✓ No dependencies.

✓ Lightweight.

✓ Easy to use.

skrolr is a JavaScript library intended to make creating responsive, easy to use marquee a piece of cake. skrolr has no dependencies (not even jQuery!), and is very lightweight, so it can be used pretty much everywhere. How small is skrolr? If all you want is the basics, it's only 396 bytes total.

Don't believe how easy it is? Here's all that's required to create a basic skrolr:

<script src="skrolr.basic.min.js"></script>
<link rel="stylesheet" href="skrolr.basic.min.css">
<ul id="obj">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<script>
let x = document.getElementById("obj");
skrolr(x);
</script>

And for a full-featured skrolr:

<script src="skrolr.es6.js"></script>
<script rel="stylesheet" href="skrolr.min.css">
<ul id="obj">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<script>
new skrolr( "obj", { // can pass an HTMLElement or ID
	waitTime: 2000,
	moveTime: 750,
	size: "100% 400px",
	arrows: true,
	buttons: true,
	numWide: [
		[   0,  500, 1],
		[ 500,  750, 2],
		[ 750, 1000, 3],
		[1000, 1250, 4],
		[1250, 1500, 5],
		[1500, 1750, 6],
		[1750,     , 7]
	]
});
</script>

What file do I use?

There are many files to choose from. If you want to do create your own API for skrolr, you probably want the basic version. For most people, you'll either want the ES6 or ES3 file, minified of course. The functionality is identical, but ES6 is smaller and much easier to read.

If you're helping in development, use the TypeScript file. Running auto-compile.js in the background (with node) does just that, automatically compiling and minifying the TypeScript to ES3 and ES6.

Timing

Let's set some timing when we initialize a skrolr.

new skrolr( "id", {
	waitTime: 1000,
	moveTime: 350
});

Stopping

What if you want to stop a skrolr?

skObject.stop();

Forward and backward

Lots of scrollers have controls to go forwards and backwards. skrolr can do that too. The best part? There's tons of ways to call it, so it's easy to remember.

skObject.forward();
skObject.backward();

Number of objects wide

Having the ability to only show a certain number of objects at a time can be immensely useful. skrolr allows you to do this by default, and it's as easy as you'd hope.

new skrolr( "id", {
	// [minSize, maxSize, numberShown]
	[   0,  500, 1], // if width of parent is 0-499px, show 1 <li> element
	[ 500,  750, 2], // " 500-749 px, show 2 <li> elements
	[ 750, 1000, 3],
	[1000, 1250, 4],
	[1250, 1500, 5],
	[1500, 1750, 6],
	[1750,     , 7] // for the highest number, don't set a maximum size
});

Transition timing

By default, skrolr uses ease-in-out for the transition-timing property in CSS. If you want to use another timing function, here's how you can set it: javascript

new skrolr( "id", {
	transitionTiming: 'linear'
});

Arrows

If you want to add forward/back arrows to skrolr, just tell skrolr to show the arrows and don't worry about anything else.

new skrolr( "id", {
	arrows: true
});

Buttons

Similar to arrows, control buttons allow you to jump to a certain location.

new skrolr( "id", {
	buttons: true
});

Size

Give skrolr a certain size with an auto-generated parent element.

new skrolr( "id", {
	width: '100%',
	height: '400px'
});

Or if you prefer a shorthand

new skrolr( "id", {
	size: '100% 400px' // width then height
});

Scroll by

It's possible to scroll by multiple elements at once. To scroll backwards, scroll by a negative number.

Scrolling by zero is allowed, but useless.

new skrolr( "id", {
	scrollBy: 1 // default value
	// scrollBy: -1 // reverse direction
});

Randomize

You can randomize the order of the children on load.

new skrolr( "id", {
	randomize: true
});

Additional features

  • Stop scrolling if viewport is blurred
  • Stop scrolling if element not in viewport
  • Creation of object with id or HTMLElement object
  • .each() method on skrolr class, allowing a function to be run on every skrolr in the page

Namespace

All JavaScript is contained within the skrolr namespace, including a custom polyfill class. All CSS is in the namespace sk-*.