Simple Text Spinning Effect with jQuery

jQuery has always been used to create random animations and effects on web pages. I have written a simple script in jQuery that animates the text in such a way that it looks like if it is spinning on its axis. I have used simple jQuery functions to provide the effect. Main logic is increasing and decreasing the ‘letter-spacing’ CSS property of the text which gives the simple spinning effect. See it working.

Live Demo Download Script

jQuery Code

$(document).ready(function() {
var _spacing; //folds letter spacing of the text
var status; //expanding or contracting
var max_spacing = 10; //maximum expansion on right
var min_spacing = -30; //maximum expansion on left
var el = $('#spin'); //element to be spinned
_spacing = parseFloat(el.css('letter-spacing')); //get the current spacing

//start the spin effect
setInterval(function() {
}, 80);

function spin(el) {
if (!isNumber(_spacing)) {
_spacing = 1;
} else {
if (status == '+') {
} else {

if (_spacing == max_spacing) {
status = '-';
} else if (_spacing == min_spacing) {
status = '+';
'letter-spacing': _spacing+'px'
}, 100);

function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);

HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">

<title>Text Spinning Effect with jQuery |</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src=""></script>

<div id="main">
<h2 class="head">Text Spinning Effect with jQuery</h2>
<div id="spin"><h2>This text will spin.</h2></div>


CSS Code

margin:50px auto;
font-family: Georgia, Times, serif;
border: 1px double #cccccc;
font-size: 26px;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
text-shadow: 1px 1px 0 white;
border-bottom: 1px dotted #cccccc;
margin:50px auto;
#spin h2{
color: #888888;

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.


2 thoughts on “Simple Text Spinning Effect with jQuery

Comments are closed.