https://github.com/peachananr/simple-text-rotator

Add a super simple rotating text to your website with little to no markup
https://github.com/peachananr/simple-text-rotator

Last synced: 16 days ago
JSON representation

Add a super simple rotating text to your website with little to no markup

• Host: GitHub
• URL: https://github.com/peachananr/simple-text-rotator
• Owner: peachananr
• License: gpl-2.0
• Created: 2013-08-13T12:57:56.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2020-10-02T11:35:59.000Z (about 4 years ago)
• Last Synced: 2024-10-01T00:55:51.503Z (about 1 month ago)
• Language: HTML
• Homepage: http://peachananr.github.io/simple-text-rotator/demo.html
• Size: 19.5 KB
• Stars: 748
• Watchers: 39
• Forks: 249
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript - simple-text-rotator - Add a super simple rotating text to your website with little to no markup - ★ 717 (Typography)

README

        
#Super Simple Text Rotator by Pete R.

A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little to no markup

Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com)

## Demo

[View demo](http://peachananr.github.io/simple-text-rotator/demo.html)

## Usage

To use this on your website, simply include the latest jQuery library found here together with `jquery.simple-text-rotator.js` and `simpletextrotator.css` into your document's ``, and all you need is one extra tag for your html document and a function call:

  

````html

Super Simple, Customizable, Light Weight, Easy Text Rotator with Style

````

Put every rotating words inside the `` and separate it with a comma and the script will automatically cycle through each words in order.

````javascript

$(".rotate").textrotator({

  animation: "dissolve", // You can pick the way it animates when rotating through words. Options are dissolve (default), fade, flip, flipUp, flipCube, flipCubeUp and spin.

  separator: ",", // If you don't want commas to be the separator, you can define a new separator (|, &, * etc.) by yourself using this field.

  speed: 2000 // How many milliseconds until the next word show.

});

````

## Other Resources

- Tutorial (Coming Soon)