In web development and site design, using animations and effects with dynamic text can attract visitors’ attention more effectively than static text. In this article, we will explain how to use the simple-to-implement jQuery plugin “jquery.simple-text-rotator.js” to display various rotation animations on specified text strings.
“jquery.simple-text-rotator.js” is a simple library that adds movement to specific text on web pages. By applying rotation effects, you can add dynamic elements to your site design and capture attention. This article explains everything from basic usage to advanced techniques, so please refer to it.
What is jquery.simple-text-rotator.js?
“jquery.simple-text-rotator.js” is a simple yet effective jQuery plugin developed by Pete R., which allows you to easily implement rotation effects on specified text. By using this plugin, you can make certain parts of a webpage look more active or visually highlight important information.
It’s very easy to use, just by adding some HTML, CSS, and JavaScript, and it works right away. Additionally, this plugin comes with multiple animation effects, allowing you to choose based on your site’s design and purpose, making it useful in a wide range of situations.
CSS for displaying various rotation effects on text
First, we will write the CSS to apply the rotation effect to the text. In this step, we will set up the styling for the entire page, along with applying animation to the specified text strings.
<style>
body{
padding: 0;
text-align: center;
position: relative;
margin: 0;
height: 100%;
}
.clWrap{
width:800px;
margin:0 auto;
}
h1{
margin-top: 50px;
margin-bottom: 50px;
font-size:18px;
line-height:1.4em;
}
</style>
<link rel="stylesheet" type="text/css" href="simpletextrotator.css" />
The above code arranges the layout and text styling of the entire page. Especially important is loading the simpletextrotator.css file. This file contains the necessary CSS styles for the text rotation effect.
JavaScript for displaying rotation effects on specific text using jquery.simple-text-rotator.js
Next, we configure the JavaScript to animate the text rotation. In this step, we load the jQuery library jquery-1.9.1.js and the jquery.simple-text-rotator.js file, then apply animation to the specified text.
You can configure $(element).textrotator({animation, speed}) to define the rotation effects.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.simple-text-rotator.js"></script>
<script>
$(document).ready(function(){
$(".demo1 .rotate").textrotator({
animation: "fade",
speed: 1000
});
$(".demo2 .rotate").textrotator({
animation: "flip",
speed: 1250
});
$(".demo3 .rotate").textrotator({
animation: "flipCube",
speed: 1500
});
$(".demo4 .rotate").textrotator({
animation: "flipUp",
speed: 1750
});
$(".demo5 .rotate").textrotator({
animation: "spin",
speed: 2000
});
});
</script>
The above code specifies several animation patterns. For example, it allows the text to rotate with different movements like fade, flip, flipCube, flipUp, and spin. The speed parameter allows you to adjust the animation’s speed, making it possible to tailor the effects to your site’s purpose and atmosphere.
HTML for displaying various rotation effects on text
Next is the HTML code. Here, you will specify the text strings where you want to apply the rotation effects.
<div class="clWrap">
<h1>Applying rotation effects only to specified text within the following strings</h1>
<h1 class="demo1">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,Commands</span>,SEO,DAD UNION,Ideas</h1>
<h1 class="demo2">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,Commands</span>,SEO,DAD UNION,Ideas</h1>
<h1 class="demo3">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,Commands</span>,SEO,DAD UNION,Ideas</h1>
<h1 class="demo4">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,Commands</span>,SEO,DAD UNION,Ideas</h1>
<h1 class="demo5">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,Commands</span>,SEO,DAD UNION,Ideas</h1>
</div>
In this code, the specified text will have the animation applied. The text inside the class=”rotate” tag will rotate word by word, separated by commas.
jquery.simple-text-rotator.js: Demo page showcasing various rotation effects on specific text
If you would like to see a demo in action, please access the demo page from the following link:
jquery.simple-text-rotator.js: Demo page
Source: jQuery Super Easy Text Rotator by Pete R. | The Pete Design
Source: jQuery Super Easy Text Rotator by Pete R. | The Pete Design
Conclusion
By using “jquery.simple-text-rotator.js,” you can easily add animations to specific text, enhancing the visual appeal of your site. This helps attract visitors’ attention and is an effective way to communicate information. It’s easy to implement and flexible to customize, so give it a try!
*Please use at your own risk.
Do not reuse the Google Analytics tags found in the demo page’s head tag.
