Morphist is a simple, high-performance jQuery slider/slideshow/carousel plugin and child object browser powered by Animate.css.

It cycles through object objects containing any content (eg images, text, etc.) in quick succession and is a great tool for displaying tweets from Twitter or items from other feeds. It’s a spin-off project from Morphext (simple script spinner).

text rotator, jquery word rotator, rotate text 180 degrees online, text rotator css, javascript rotating text, rotating text animation, morphext

3D Auto Rotator Gallery Image Using Pure CSS

How to make use of it:

1. Load the necessary jQuery library and Animate.CSS CSS3 library on your webpage.

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2. Load the jQuery Morphist plugin JavaScript and CSS files on the webpage.

<link href="dist/morphist.css" rel="stylesheet">
<script src="dist/morphist.js"></script>

3. Create a list of items for the rotor.

<ul id="demo">
  <li><img src="https://unsplash.it/400/300?random"></li>
  <li><img src="https://unsplash.it/400/300?random"></li>
  <li><img src="https://unsplash.it/400/300?random"></li>
  <li><img src="https://unsplash.it/400/300?random"></li>
  ...
</ul>

4. Call the plugin in the HTML menu and set up the types of animations you want to use.

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

// animation styles
animateIn: 'fadeInLeft',
animateOut: 'lightSpeedOut',

// animation speed
speed: 2000,

// callback
complete: $.noop

});

Simple Content Rotator, Morphist Plugin/Github

See Demo And Download

Official Website(MrSaints): Click Here

This superior jQuery/javascript plugin is developed by MrSaints. For extra advanced usage, please go to the official website.