Skip to content

Latest commit

 

History

History
112 lines (75 loc) · 3.51 KB

README.md

File metadata and controls

112 lines (75 loc) · 3.51 KB
Raw

Morphist

Dev Dependency Status

A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate.css.

It cycles through an element's [child] objects containing any content (i.e. images, text, etc) in quick succession and it is a great tool for displaying tweets from Twitter or items from other feeds. It is a spin-off project of Morphext (a simple text rotator).

Website / Demo

Install

Download from the project page.

Install with Bower: bower install --save Morphist

Usage

  1. Import the latest Animate.css and jQuery library into your HTML.

  2. Import morphist.css and include morphist.min.js in your HTML document.

  3. Encapsulate your rotating objects (children, e.g. list item) in an element (parent, e.g. unordered list):

    I am a...
<ul id="js-rotating">
    <li>So Simple</li>
    <li>Very Doge</li>
    <li>Much Wow</li>
    <li>Such Cool</li>
</ul>
...child object rotator.

  4. Trigger the plugin by calling Morphist() on the element (parent) containing the rotating objects (children):

    $("#js-rotating").Morphist();

A demo titled index.html is included in this repository. Open it to see the end-result.

Options

Morphist exposes the following options to alter the behaviour of the plugin:

Option Type Default Description
animateIn string bounceIn The entrance animation type (In).
animateOut string rollOut The exit animation type (Out). Refer to Animate.css for a list of available animations.
speed int 2000 The delay between the changing of each object in milliseconds.
complete object Function null A callback that is executed after an item is animated in.

They may be used like so:

$("#js-rotating").Morphist({
    animateIn: "fadeIn", // Overrides default "bounceIn"
    animateOut: "zoomOut", // Overrides default "rollOut"
    speed: 3000, // Overrides default 2000
    complete: function () {
        // Overrides default empty function
    }
});

The plugin relies heavily on Animate.css for its smooth, high performance animations to transition between each object. Thus, the default animation speed (different from the interval between each object as described above) may be altered via CSS:

#yourElement, .yourClass {
    /* Overrides Animate.css 1s duration */
    -vendor-animation-duration: 3s;
}

"Issues"

Refer to Morphext's "Issues".

Should you encounter any problems or require assistance with this plugin, simply open a GitHub issue in this repository or you may contact me via Twitter.

Prerequisites

License

Morphist is licensed under the MIT license (http://ian.mit-license.org/).