Just the mindless blathering of a bored nerd

NakedTransition is a simple transition jQuery plugin for creating fancy transitions between images. Why is it called “Naked Transitions”? Because most other image transition libraries require the use of a full blown gallery. Sometimes, you just need nothing more than to flip an image…with a nice transition.

Get NakedTransition!

See the live demo here

Download Nakedtransition

Usage

Required Markup

Naked Transtion works by replacing the background image of a div with another image that is transitioned in. By the end of the transition, the background-image style property will be replaced with the new image. As a result, the following css is required on the div:

background-image position – absolute or relative

width – must be the width of the background image

height – must be the height of the background image

Additionally, the new image must be the same dimensions of the original image.

Running function

davidgranado.com/demos/naked-transitions

$('div-selector').nakedTransition(newImageLocation)

newImageLocation – A string url of the new image to replace the image in the div. If this form is used, a default animation will run.

$('div-selector').nakedTransition(newImageLocation, params)

newImageLocation – A string url of the new image to replace the image in the div. If this form is used, a default animation will run.

params – an object containing the config options for the animation. Adjust these options to see the effect here in the current version of the demo page

Here are a list of the current options:

strips Integer – number of strips in animation. (default 15)

stripSpeed Integer – time required for each strip to complete animation in ms. (default 500)

stripDelay Integer – time between the start of one strip’s animation and the start of the next strip’s animation animation in ms. (default 500)

position String with possible values ‘top’, ‘bottom’, ‘alternate’, ‘curtain’ – describes where the strips will the animation sequence. (default alternate)

direction String with possible values ‘left’, ‘right’, ‘alternate’, ‘random’, ‘fountain’, ‘fountainAlternate’ – describes which strip will animate first and in which order the next animation will proceed.
(default fountainAlternate)

effect String with possible values ‘curtain’, ‘zipper’, ‘wave’ Preset animations that will override many of the other options (default none)

complete function to run once animation is completed. (default none)