Text Rotator Plugin With JavaScript & Animate.css - Morphext

This is the rewritten version of the MrSaints' Morphext plugin.

It enables you to create a simple, high-performance, and cross-browser text rotator that rotates through text phrases with more than 100 awesome CSS3 animations powered by the latest Animate.css library.

Compatible with jQuery and Vanilla JavaScript.

How to use it:

1. Include the latest Animate.css library on the page. Optional. The plugin allows you to automatically attach the latest animate.css to the page via the autoAttachAnimateCss option.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. Include the Morphext plugin's files on the page.

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Morphext Plugin -->
<link rel="stylesheet" href="morphext.css" />
<script src="morphext.js"></script>

3. Create a container to hold the text rotator and pass the options via the data-morphext-options attribute. All possible options:

• animation: Animate.css animation name. Default: 'bounce'.
• speed: Animation speed. Default: 2000.
• autoInit: Auto start the animation on page load. Default: true.
• phrases: An array of text phrases
• animateCssVersion: Animate.css version. Default: '4.1.1'.
• autoAttachAnimateCss: Auto attach the latest Animate.css to the page. Default: true.

<div 
  class="js-rotating-text" 
  data-morphext-options='{"phrases": ["jQuery", "Script"]}'>
</div>

4. Initialize the plugin and done.

// As a jQuery Plugin
$(".js-rotating-text").morphext();

// Vanilla JavaScript
new Morphext('.js-rotating-text');

---

This awesome jQuery plugin is developed by ferbueno. For more Advanced Usages, please check the demo page or visit the official website.