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() {
spin(el);
}, 80);

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

if (_spacing == max_spacing) {
status = '-';
} else if (_spacing == min_spacing) {
status = '+';
}
el.animate({
'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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Text Spinning Effect with jQuery | Webspeaks.in</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

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

</html>

CSS Code

#main{
width:90%;
margin:50px auto;
font-family: Georgia, Times, serif;
text-align:center;
border: 1px double #cccccc;
}
h2{
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;
}
h2.head{
border-bottom: 1px dotted #cccccc;
color:#333333;
}
#spin{
width:80%;
padding-left:400px;
margin:50px auto;
text-align:left;
}
#spin h2{
color: #888888;
}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

One thought on “Simple Text Spinning Effect with jQuery

Comments are closed.