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

Related tags

Typography simple-text-rotator
Overview

#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., Founder of BucketListly

Demo

View demo

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 <head>, and all you need is one extra tag for your html document and a function call:

Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style

Put every rotating words inside the <span class="rotate"></span> and separate it with a comma and the script will automatically cycle through each words in order.

$(".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)
Comments
  • Keeping anchor tags

    Keeping anchor tags

    Hi,

    This is a very nice plugin. I just want to know if it is possible to keep the links on every word? The plugin removed them automatically.

    My code: <span class="rotate"><a href="#link1">Word 1</a>, <a href="#link2">Word 2</a>, <a href="#link3">Word 3</a></span>

    Thanks, Phe

    opened by phele 2
  • Only Odd Items are Show when Fade is Selected as Transition Type

    Only Odd Items are Show when Fade is Selected as Transition Type

    Rotator is skipping even items - only shows off - when the Fade options is selected. All other transition options perform as expected and rotate through the whole array.

    opened by erikphanson 1
  • Conflict with parallax

    Conflict with parallax

    Hi! When I use the script on a span included in a div using as parallax, it doesn't work. It only work when I disable the parallax script. I'm using this one: https://github.com/pederan/Parallax-ImageScroll

    Any chance you can help?

    opened by achillion 1
  • This plugin skips ever other word

    This plugin skips ever other word

    Took me a while to figure out why my code was skipping over every other word then I went to your demo and saw its doing the same thing, what it should be doing is going from "Simple" to "Customizable" to "Light Weight" to "Easy", and then back around but it skips, which probably isn't a big deal when you have an odd number of words, but when you have an even number you can really tell it doesn't work, also on your demo you can see it keeps going back and forth between "Simple" and "Light Weight".

    Appears to only be happening when using fade...

    How can I fix this?

    opened by kile-lindgren 1
  • Small Issue When Tabbing Out

    Small Issue When Tabbing Out

    Hi there, I love the plugin! However I'm running into this issue when testing.

    The problem occurs when you either leave the Chrome browser (as in focus on another program in Windows), or when you change tabs. It seems like the script stops, then tries to catch up with itself, creating "blank" words. I'm not sure if this is a Chrome issue, or an issue with the plugin.

    Here's two examples:

    Is there a way to fix this? Any support or leads would be greatly appreciated.

    Thanks!

    opened by Zackery 0
  • Space between words causes strange behaviour when rotating to the next word in orde

    Space between words causes strange behaviour when rotating to the next word in orde

    When is jumps from "Webshop Owner!" to Designer! It first puts a line break between Webshop and Owner and then start the rotation. This causes a strange visual effect within Chrome.

    Hello, Entrepreneur!, Webshop owner!, Designer!, Consultant!

    opened by rolero 1
Owner
Pete R.
Pete R.
GitHub http://peachananr.github.io/simple-text-rotator/demo.html
jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

BigText BigText Makes Text Big Read the original blog post Play around on the demo Watch the video Download bigtext.js Or use bower: bower install big

Zach Leatherman 883 Dec 15, 2022
Text Neon Golden effect jQuery plug-in

novacancy.js novacancy.js is a text neon golden effect jQuery plugin. Demo Visit demo site Basic Usage Just use $('#no').novacancy(); or detail $('#no

Chuck Chang 185 Sep 24, 2022
A simple little WordPress block that allows you add an SVG icon or graphic to your website.

A simple little WordPress block that allows you add an SVG icon or graphic to your website.

Nick Diego 43 Jan 4, 2023
A jQuery plugin that creates a countdown timer in years, months, days, hours and seconds in the form a bunch of rotating 3d cubes

CountdownCube is a jQuery plugin that is in the form of a bunch of rotating 3D cubes. It uses CSS transitions to create the 3D rotating cube effects.

null 16 Mar 6, 2022
Rotating slider for selecting numerical values.

Rotating slider for selecting numerical values. Allows mobile friendly precise selection for value from selected range with desired step. Component is especially useful for hybrid application using frameworks like Ionic, Cordova or PhoneGap.

null 0 Sep 27, 2022
Rotating CSS dice in 3D using jQuery. Based on my old snippet on CodePen.

Dice Rotating CSS dice in 3D using jQuery. Based on my old CodePen Roll the dice!. Demo: https://alexerlandsson.github.io/dice/ How to use Include /do

Alexander Erlandsson 6 Dec 14, 2022
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Jan 7, 2023
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Dec 30, 2022
Json2video-nodejs-sdk - Create videos programmatically in the cloud from NodeJS: add watermarks, resize videos, create slideshows, add soundtrack, voice-over with text-to-speech (TTS), text animations.

Create videos programmatically in Node JS Create and edit videos: add watermarks, resize videos, create slideshows, add soundtrack, automate the creat

null 2 Nov 20, 2022
This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago Cárdenas 6 Jun 9, 2022
Super-Resolution-CNN - web server for super-resolution CNN

Web Server for Image Super-Resolution This project showcases the Super-Resolution CNN (SRCNN). The model is pretrained following this tutorial. The or

Daniel O'Sullivan 1 Jan 3, 2022
This is college project in which me and my team create a website that provide the tools for basic text modification and add todos also we add blog init.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ayush 4 Jun 9, 2022
This is a little script that shows how to ddos a website. This is for example purposes only. Don't ddos a website without the consent of his owner

Dddos-Script This is a little script to ddos a website. This is for example purposes only. I am not responsable of what you do with it If you like thi

null 13 Dec 17, 2022
Simple CSS library for semantic HTML markup

awsm.css awsm.css is a simple CSS library for semantic HTML, which doesn't require classes, ids, attributes, etc. Just start to create page with HTML5

Igor Adamenko 1.4k Dec 30, 2022
Simple implementation of markup for Scriptable widgets.

Widget Markup Write Scriptable widgets with markup. Installation Just import the library script to your scriptable widget file. const {widgetMarkup, c

Rafael Gandionco 32 Nov 22, 2022
A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine.js Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM,

Alpine.js 22.5k Jan 2, 2023
A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine.js Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM,

Alpine.js 22.5k Dec 30, 2022
[DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

jQuery Form Validator [DISCONTINUED] Validation framework that let's you configure, rather than code, your validation logic. I started writing this pl

Victor Jonsson 976 Dec 30, 2022
Straightforward interactive HTTP requests from within your Alpine.JS markup

Alpine Fetch Straightforward interactive HTTP requests from within your Alpine.JS markup. View the live demo here What does this do? Alpine.JS is a ru

null 29 Dec 21, 2022
Little Alpine.js plugin to add a typewriter effect to any HTML element.

⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. ?? Installation CDN Include the following <script> tag in

Marc Reichel 58 Dec 28, 2022