bgStretcher is a jQuery plugin that proportionally resizes the background-image to fill the entire viewport.

It can be used with a single image just for the resizing feature or multiple images as a slideshow.

The slideshow can be browsed with pagination and prev-next buttons besides the autoplay and there are multiple transition types offered.

Further customization is possible by defining the slideshow speed, delay between each item and sequence mode (in an order or randomly).

Also, methods exist for playing and pausing it from any custom events.

Mimicking the interactions offline is always popular in the world of computers.

Page-flips are one of the most popular ones of them in web design. They are implemented very successfully in Flash, many websites, documents, magazines are being created/published each day.

With the capabilities of new web technologies, we can also expect them to be accomplished using only HTML, CSS and JavaScript (remember "20 Things I Learned"? It is also open source).

There are several easy-to-use jQuery plugins that offer a good page-flip experience and help creating book-like interfaces. Here they are:

Turn.js

A jQuery plugin that has lovely and smooth page flip transitions.

The first page acts as the cover and the rest can be browsed by simply turning the pages from any desired corner.

Turn.js is only 15kb, works on mobile & tablet browsers as well and makes use hardware acceleration.

jPageFlip

jPageFlip is a highly customizable jQuery plugin for book-like interfaces.

It can -optionally- flip pages on mouse clicks and has support for transparent + semi-transparent image files.

P.S. The plugin performs better on WebKit browsers.

Read the rest of this entry »

There are many beautiful content sliders out there which can be easily integrated into web pages where most of them come with a default design and functionality.

If you want to create a completely custom one, Revolver.js,a boilerplate for customizable sliders is a good fit.

Revolver.js is a jQuery and MooTools plugin with an API covering the most common slider functions.

Almost any markup can be used for sliders, their designs are under control with CSS and the API is flexible enough to manage it in any desired way.

There are various transitions types to choose from, functions exist for browsing items (first, last, next, etc.) and callbacks are offered for each event.

The resource is very easy-to-use, documented in detail and has a small footprint (~4.5kb minified).

Swipe JS is a lightweight (3.7kb minified) mobile slider with 1:1 touch movement (sliding content based on exact touch position).

It can display any HTML content and offers a native-like experience with features like:

• resistant bounds (increased resistance to slide when there are no items to display next or before)
• smart resizing on rotation as the slider resets to make sure the sliding elements are sized right
• the size of each slide is set with the width of the container which is useful for passing different widths on responsive designs
• detecting if you’re trying to scroll down the page or slide the content left to right

Swipe is a standalone slider which doesn't rely on any JavaScript library and has few configuration options like:

• the slide to be displayed on initial load
• speed of transitions
• auto slideshow to be on/off
• and callback fired after successfully displaying a slide

Also, it has API methods for custom interactions including the display of prev-next items and getting the current position.

Fred Heusschen, a talented frontend web developer which has other resources shared at WRD, is sharing a must-bookmark one focused on image carousels.

CoolCarousels is a showcase of 20+ image sliders and carousels with each having a different look and functionality.

There are sliders with thumbnails, responsive examples, horizontal/vertical ones, lazy-loading supported sliders for displaying many images and much more.

They use jQuery as the JavaScript framework, their source codes can be seen with a click, all of them have demos and can be downloaded easily.

Flow Slider is a jQuery image slider plugin which reminds us the once-popular Flash sliders that respond to mouse interactions.

It works by converting an unordered list into a slider and can be browsed by hovering to the right or left side of it.

The plugin can be completely customized in means of design and functionality. There are options for transition type and speed, acceleration, starting position and much more.

There are many jQuery slider plugins out there with each having pretty much number of features which usually end up in a big size.

Craftyslide is a jQuery image slider plugin for anyone looking to create a slider with only the standard and most-used features.

It accepts unordered lists, can display captions, has a bullet navigation besides prev-next ones and uses fade animation for transitions.

Such a limited yet (usually) enough functionality only weights 2kb and works on all major browsers.

Fotorama is a highly flexible image gallery plugin for jQuery that works in both desktop and mobile browsers.

It offers multiple options for browsing through the images including thumbnails, prev-next buttons, swiping, slideshow or bullet navigation.

The thumbnails can either be prepared and defined manually for maximum quality or the plugin will display a stretched version of the original images.

Images can have captions, the image to be displayed on initial load can be defined and transition duration can be changed.

There are also multiple options for arranging dimensions and positions of the slider and thumbnails (can be vertical too).

Minimit is a very flexible jQuery plugin for creating any type of content sliders including galleries, slideshows or carousels.

It is good fit for designers/developers who wants to build completely custom outputs as the plugin covers all the logic required but asks you to to code all the animations and the CSS.

The plugin has a good number of options that control the interactions and callbacks exist on every level.

Minimit has a documentation page and a list of demo sliders that show how powerful it can be.

Slider.js is a slideshow engine built with jQuery and uses CSS3 and/or HTML canvas for the transitions.

Items can have a text-caption with links and users can browse it with a pagination or using the prev-next links.

Slider's design can be completely changed as there is support for theming and interactions can be customized using the well-documented API.

The data source is JSON and, besides the 13 available CSS transitions, there 10 built-in and good-looking canvas functions.

P.S. The web page of the resource is also includes valuable information on CSS and canvas animations.