scrollSpeed is a lightweight jQuery extension for custom scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing. After setup, reference the scrollSpeed() method and modify the step and speed parameters to create the desired scrolling effect. The step parameter defaults to 100 units, while speed defaults to 800 milliseconds; custom easing is optional.

Illustration by akselkreis

If you are looking to add a little flair to your anchor scrolling, this plugin can help. AnchorScroll.js is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets that can also add classes to elements on scroll events. You can add blur effects, bounce effects or even text to let your user know you are scrolling to the right spot.

TypeIt is a high quality jQuery plugin that types text a given string or strings of text on a page. Its responsive, lightweight and easy to customize.

To get started you can either pass in settings object, use data-typeit-* attributes, or You can define your string by dropping it directly in the HTML element. You can have it play back multiple strings and even set it to delete the previous string before starting a new one for that realistic effect. You can also alter details like speed, and even pacing to make it feel like a person is doing the typing.

Large data sets can pollute DOM with used tags. This can cause a scroll lag as you display the data. Cluserize.js elegantly solves this issue with a clever solution that splits your data into clusters and only loads it as you scroll. This gives you a smooth and fast scroll no matter how many rows of data there are.

You can apply Clusterize.js to a table, ordered list, unordered list or a div. They have a very useful sandbox on the demo site.

Flavr is a fresh and stylish popup dialog for your next flat website. It is built to be responsive, able to adapt its layout and position to any screen size of your viewer with the power of CSS.

To get the best user experience, flavr is animated using the popular animate.css. And most importantly, flavr works on any modern browser (IE8+), any device and any screen size.

Features of flavr include:

• Clean and modern flat design
• Well documented
• Fully responsive
• Lightweight, yet powerful
• Bootstrap compatible
• CSS3 animated in modern browsers
• jQuery powered
• Cross browser support

This plugin is available for $6 from the Envato Market and is quality checked and comes with future updates and 6 months of support. Additional support is also available.

If you are looking for a lightweight jQuery plugin for complex two-way data binding in real time, jQuery.my might be the perfect solution.

Here’s how it works: The tool mutates the object given as a data source, reflecting interactions between the user and the interface. Data bindings, facade appearance and CSS styling of an app are all defined using single manifest, which is standard javascript object. Manifests are JSONable.

Here are a few more features:

• jQuery.my recognizes standard HTML controls and complex composites created using rich UI plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box.
• jQuery.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite control for parent form.
• Syntax of $.my manifest is very simple, lean and unobtrusive. There exist specialized in-browser IDE for $.my apps authoring. This IDE is a built-in component of cloudwall.me system.

The result is a fully interactive set of tools, tables, curves and layouts that can work in a variety of applications. Check out the demo to see how it can work for you.

Drag and Drop is a full website and content management system back end with an included database. This plugin works with that system to create three options for using and displaying sortable lists with jQuery, CSS, mySQL, AJAX and PHP.

The first example populates the list from the database, allows you to sort the order, then allows you to save he list using ajax functionality so the page does not reload. In addition, there is a message box that shows the status of whether the boxes have been moved and not saved and whether changes have been implemented to the database.

The second example is a simple sort list that allows you to produce a list of varying length and apply a drag and drop feature.

The third example shows how the functionality can work across a multiple column format.

This tool works across a variety of platforms and includes support for touch devices and lets you save lists via a cookie session. Drag and Drop Sortable Lists is available from the Envato Market for $5. The license includes future updates and has been quality checked by Envato. Additional support is also available.

Sortable is a minimalist Javascript library that helps you create reorderable, drag and drop lists for modern web browsers and touch devices. And it does not use jQuery!

The tool comes with plenty of other nifty features as well, such as

• CSS animation when moving items
• Support for drag handles and selectable text
• Smart auto-scrolling
• Support for meteor, AngularJS, React and Polymer
• Supports any CSS library (such as Bootstrap)
• Has a simple API
• Allows dragging within a list or between lists

Sortable is packed with customization options as well including sorting, delay, filtering, ghost classes, fallbacks, and scrolling sensitivity and speed.

Sortable comes with plenty of documentation to help you get started and if you want to go the jQuery route, there’s support and documentation for that as well.

Pace is a tool to help you create an awesome automatic page load progress bar.

Include pace.js and a CSS theme of your choice, and the result is a beautiful progress indicator for your page load and ajax navigation. There’s no need to hook in to any of your code because the progress bar is detected automatically.

Pace comes with several different themes so you have great aesthetic options. Themes include:

• Minimal
• Flash
• Barber Shop
• Mac OSX
• Fill Left
• Flat Top
• Big Counter
• Corner Indicator
• Bounce
• Loading Bar
• Center Circle
• Center Atom
• Center Radar
• Center Simple

With more theme options that you could ever use, easy installation with Eager and nifty animation, this tool is a great addition to almost any website design. Try it in a flash with a live preview that works on your website.

Ever worry that your text is not optimized for readability? Then Readable is the plugin for you. It conveniently marks the 45th and 75th characters of every paragraph tag when turned on so your line breaks fall somewhere in between those two numbers, the standard for optimum readability.

The magic character count range of 45 to 75 refers to the number of characters occupying one line of text within a paragraph, before a line break and text wrap. If that number is too low or too high, the paragraph becomes much less readable.

Here’s how it works:

The content of each paragraph tag is converted into a text string right after we duplicate it as a data attribute. The text string is then counted using the .substring() function to find the 45 to 75 characters. We then pop in a span tag with a “readable” class, which is what we need to create the styles. Once the toggle is switched off, we reinsert the original HTML content back into the paragraph using the preserved HTML from the data attribute.

Sound complicated? It’s actually very simple. Just download the three files, add them to the proper location in your code and you are ready to go! (The documentation explains it all quite easily.)

bLazy is a lightweight lazy loading, multi-serving image script. It’s written in JavaScript and doesn’t have any dependencies for third party libraries like jQuery.

The goal of bLazy is to help save bandwidth and server requests to your site to everything loads that much faster. (As an added bonus it saves data usage for mobile users as well.)

The loader has a sleek look and can work with almost any style of website design. The code is fairly easy to understand and install.

Here are a few reasons why you should try it:

• bLazy is used on big sites with millions of monthly visitors so it has been tested plenty.
• bLazy is written in pure JavaScript and doesn’t depend on third-party libraries such as jQuery.
• bLazy can lazy load all types of images, including background images.
• bLazy can lazy load images depending on screen size (multi-serve images).
• bLazy can serve retina images on retina devices.
• bLazy is lightweight, less than 1.2KB and less than 1.05KB (if you don’t need IE7- support).
• bLazy is AMD, CommonJS and Browser global compatible.

This tool works on all modern browsers and is a great way to better serve images to your users.

Bigfoot is a jQuery plugin to help you create better footnotes and make them a lot easier to use.

Footnotes on the web can be a pain; you click a tiny number, get transported somewhere near the bottom of the page, find the footnote, and click on a link to go back where you can from.

This script makes that process painless by automatically detecting the footnote link and content. Then it turns the link into an easy-to-click button, and adds a popover when the the footnote button is clicked.

The script and default styles are built to work great on any size viewport; the popover is positioned on the top or bottom automatically (based on the relative amount of space), will update its location as the viewport changes size and will ensure that the popover never scrolls off screen. These elements make for a better user experience.

The tool is easy to install and use and comes with some options so you can make adjustments on your own.

List.js is the perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. It is built to be invisible and work on existing HTML.

Features of List.js include that it is simple and invisible, easy to apply to pretty much any HTML, has no dependencies, is fast and super lightweight and can handle thousands of items. It includes a simple template system that adds the possibility of editing, adding or removing items.

It works with modern browsers including Chrome, Safari, Firefox and Internet Explorer 6+.

Examples of usage include partnering List.js with an existing list, with an existing list plus adds, a new list, tables, fuzzy search and pagination.

The tool includes extensive documentation to help you install and use this tool with ease. List and item APIs are also available.

A javascript library that sets out to do one simple job — draw and animate the most perfect and playful text underline, that’s exactly what underline.js does.

Here are some of the features of the tool:

• It is pixel-perfect on the half pixel level for retina displays
• It has an optimized thin stroke width that is always one-sixth of the width of a period
• It sits on the optimal Y position between the baseline and descender line (the golden ratio point
• It has holes around descenders to completely respect the type’s shape

According to the developer, the concept of underline.js is in constant development and is designed to help push the boundary of web typography.

There’s more to learn about this tool as well if you are interested in the story behind its development. You can watch the video from the NY Tech Meetup where it was presented.