Parallax scrolling, creating an illusion of depth by moving web elements in different speeds while scrolling, can help offering an attractive browsing experience.

Skrollr is a lightweight (7kb minified – 3k gzipped) and standalone JavaScript scrolling animation library that simplifies bringing such parallax effects to life.

It allows us to animate the CSS properties of any element according to the horizontal scrollbar position. Defining key frames for each element at certain points in top offset is enough for that.

And, the library is perfect for designers who are not good at JavaScript as -almost- everything is defined inside HTML elements and no JS coding.

jPages is a client-side pagination script (a jQuery plugin) with features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel.

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

The plugin detects the number of items in a given list and auto-creates the navigation.

Callbacks exist to get the current page, total number of pages, number of items, etc. and it is possible to intervene the page number to be displayed using an API method.

P.S. There is an optional integration with the popular scripts Animate.css and Lazy Load for a more attractive and faster pagination experience

With the regularly increasing number of retina-screen devices browsing web pages each day, we may want to display images with better quality to such devices.

Here are 3 easy-to-use solutions for serving high resolution images to retina-display devices:

Retina Images

Retina Images is a JavaScript/PHP solution which stores the devicePixelRatio in a cookie and displays the high-res version of images (if exists) by checking whether that cookie's value is 1 or not (if 1, then the device has a retina screen).

With a simple setup, it works on images that defined in both CSS and HTML.

Retina.js

This open source script checks for every image on the web page to find out if there is any high-res version hosted on the server.

If such an image exists, it swaps that with the original one.

P.S. For the high-res images, It looks for the Apple's prescribed high-resolution modifier (@2x) version.

jQuery Retina Display Plugin

This jQuery plugin also follows Apple's prescribed high-resolution modifier (@2x) format, searches for the high-res versions and replaces them with the original one if exists.

It is a plug 'n' play solution, nothing to edit (just add the high-res versions of the images to the same folder with other images).

LionBars is a jQuery plugin for creating OSX-style, custom scrollbars for any web page.

The scrollbars created looks the same in all browsers under each OS and they don't hurt the usability by not shrinking the content or with the auto-hide option.

It has support for endless scrolling (check related WRD tutorial) and can fire functions when the scrollbar reaches to the end.

Fiddle Salad is a fresh web development tool, an online IDE, for client-side web applications.

It allows us to write HTML, CSS, JavaScript code or use alternatives like HAML,Zen Coding, SASS, LESS and more.

All the code is written in a single-page interface and the output is displayed/rendered instantly.

There is built-in code completion support for CSS + jQuery and links to the documentation for the properties of each language.

With a free membership, it is possible to create any number of projects and save them for re-working on them without losing any settings or data.

Rhinoslider is a very flexible jQuery slider plugin that can present any HTML element (text, images, videos, etc.).

The plugin comes with lots of transition effects and new effects or styles can be added with ease -thanks to its extensible architecture-.

It has options for every possible variable from the customization of the effects to auto-play, play direction, random display and navigation.

There is a web-based configurator that allows defining these values while seeing the output quickly. And, it generates the related jQuery code automatically.

Rhinoslider also has a full-featured API for controlling the functionality and customizing it further.

In order to HTML5-enable older browsers or to create a fallback for unsupported features, it is very common to use polyfills (like using a Flash video player if there is no HTML5 video support).

Webshims Lib is a JavaScript library that automates the process of loading polyfills by detecting the capabilities of a browser with Modernizr.

It already includes many polyfills like JW Player for audio-video fallback, ExCanvas for canvas support and more. Also, it is modular which means new pollyfills can be added with ease.

The library is very helpful to keep the page sizes small by only loading the required polyfills for incapable browsers.

There are several code syntax highlighters and most of them handle the job well.

For a very lightweight solution, Rainbow is a fresh one which is only 1.4kb and can be extended with ease.

It is only needed to use the JS module for the language to be highlighted for keeping things small.

Also, the colors and fonts used can be completely customized with CSS theming support.

Timeline is a JavaScript-powered tool for creating interactive storytelling timelines where a timeline works in parallel with a content slider.

Users can choose to browse the contents either by clicking the items in the timeline or by navigating through the content slider where both stays synchronized all the time.

Items are listed in chronological order, we can go back and forth through the timeline with drag 'n drops and it is possible to expand/contact it.

It can use JSON data or Google Spreadsheets as the data source and there is built-in support for pulling content from services like Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

Sigma.js is an open-source JavaScript library with a small footprint for drawing graphs using HTML5 canvas.

It is built for to consuming static or dynamic but interactive network maps with unlimited nodes on a web page.

The library is standalone, can be extended with plugins (GEFX parser and ForceAtlas2 layout algorithm are included as plugins) and offers jQuery-like chainable methods.

There are a lot of variables for customizing each instance and various examples exist that show the capabilities of Sigma.js.