When designing websites or applications, creating visual impact to capture users’ attention is crucial. Adding motion to text on a page can significantly enhance even simple content. In this article, we’ll explore in detail how to use jquery.textanimation.js to add various animation effects to text on your page.
By learning this method, even beginner engineers and web developers can easily create attractive text effects, improving the quality of their websites significantly.
What is jquery.textanimation.js?
First, let’s explain what jquery.textanimation.js is. This plugin is a JavaScript library that uses jQuery to add animation effects to text. It allows you to add motion to existing text without writing complex code, making it easy for beginners to implement. For example, you can easily add effects like scrolling text or changing colors.
Additionally, this library can be combined with other jQuery plugins, offering high flexibility and allowing for various customizations. This enables you to maximize your creativity and create unique web content.
Preparing to Use jquery.textanimation.js
To use jquery.textanimation.js, you need to load several files. Here’s how to load those files:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.transit.min.js"></script>
<script type="text/javascript" src="jquery.textanimation.js"></script>
These files serve as the foundation for applying animation effects to text. In particular, jquery.transit.min.js plays a supportive role in ensuring smooth text animation.
Steps to Load the Files
- jquery.min.js: The main jQuery library. jquery.textanimation.js will not work without it.
- jquery.transit.min.js: A support library for smooth animations.
- jquery.textanimation.js: The library that provides the animation effects introduced in this article.
By loading all these files within the head of your HTML or just before the closing body tag, you’ll be ready to start.
CSS Settings for Text Animation
Next, we’ll configure the CSS settings to apply animation effects to the text. This will determine how the specified text is displayed.
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:2.0em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:800px;
margin:0 auto;
}
div.demo{
font-size:30px;
margin:30px;
}
-->
</style>
Key Points of CSS Settings
- Font Settings: Configure the font size, color, and font family of the text. This ensures a consistent design across the entire page.
- Layout Settings: Define the overall layout with #idWrap and set the layout for each text with div.demo.
- Background Color and Padding: Adjust the background color and padding to make the text stand out.
By configuring these CSS settings, the text with applied animations will be displayed in a visually organized manner.
Setting Animations in HTML
Next, let’s look at how to set animations for text in HTML. As shown below, you can apply different animation effects to each text.
<div id="idWrap">
<h1>The following text will be displayed with various animation effects.</h1>
<div id="demo_roll1" class="demo" >DAD UNION</div>
<div id="demo_roll2" class="demo" >css</div>
<div id="demo_step1" class="demo" >JavaScript</div>
<div id="demo_step2" class="demo" >jQuery</div>
<div id="demo_high1" class="demo" >PHP</div>
<div id="demo_high2" class="demo" >DAD UNION</div>
<div id="demo_jump1" class="demo" >css</div>
<div id="demo_jump2" class="demo" >jQuery</div>
<div id="demo_puff1" class="demo" >PHP</div>
<div id="demo_puff2" class="demo" >WEB Media</div>
</div><!--/idWrap-->
Key Points in HTML
- Each text is enclosed in a div tag with the class name “demo” specified.
- Each div is assigned a unique ID, allowing you to assign different animation effects to each one.
This setup allows multiple different animation effects to be executed simultaneously on the same page.
Implementing Animation Effects with JavaScript
Here, we’ll explain how to implement animations using jquery.textanimation.js. The following code is an example of applying 10 different animation effects.
<script type="text/javascript">
$(document.body).ready(function(){
$("div#demo_roll1").textAnimation({
mode: "roll"
});
$("div#demo_roll2").textAnimation({
mode: "roll",
minsize: 20,
magnification: 30,
fixed: "top",
delay: 15,
stuff: 1.5
});
$("div#demo_step1").textAnimation({
mode: "step"
});
$("div#demo_step2").textAnimation({
mode:"step",
minsize:20, //minimum font size[integer]
maxsize:60, //maximum font size[integer]
upper:false, //is upper step? [boolean]
fixed:"top", //which fixed top or bottom ["top","bottom"]
stuff:2.2, //font stuff quantity[float]
delay:200, //delay for between charactors animation
interval:0, //interval for between animation
duration:1000 //animation duration
});
$("div#demo_high1").textAnimation({
mode: "highlight"
});
$("div#demo_high2").textAnimation({
mode: "highlight",
baseColor: "#111111",
highlightColor: "#2FFF5F",
delay: 35,
interval: 0,
duration: 100
});
$("div#demo_jump1").textAnimation({
mode:"jump"
});
$("div#demo_jump2").textAnimation({
mode:"jump",
altitude:10, //jump altitude[integer]
bound :false, //bound animation[boolean]
fixed:"bottom", //which fixed top or bottom ["top","bottom"]
delay:80, //delay time for animation between characters[integer]
interval:0, //interval time for between animation[integer]
duration:400 //animation duration time[integer]
});
$("div#demo_puff1").textAnimation({
mode:"puff"
});
$("div#demo_puff2").textAnimation({
mode:"puff",
color:"#77FF6F", //highlight puffing color
percent:200, //font scale percentage.[integer]
interval:1000, //interval time for between animation[integer]
duration:1000, //animation duration time[integer]
times : 5 //how times puffing animation[integer]
});
});
</script>
Description of Each Animation Effect
- Roll: An animation where the text rolls horizontally.
- Step: An animation where the text expands and contracts step by step.
- Highlight: An animation where the text is highlighted.
- Jump: An animation where the text jumps.
- Puff: An animation where the text puffs up and down.
These animations are specified using the mode option. Additionally, you can customize the effect by setting more detailed options (e.g., minsize, duration) for each animation.
Explanation of JavaScript Code
- $(document).ready(function(){…}): Executes the animation after the page has fully loaded.
- .textAnimation({mode: “roll”}): Applies the specified animation to a particular div.
With these settings, the text on the page will be displayed with the specified animation effects.
textAnimation: Demo Page for Various Text Animation Effects
Here, we introduce a demo page where text animation effects are added using jquery.textanimation.js. Refer to this demo as you consider how to incorporate it into your own project.
textAnimation: Demo Page for Various Text Animation Effects
On this page, you can experience all the animation effects explained above. Check how each animation works and choose the ones you want to apply to your site as needed.
Original Source: jQuery Text Animation – jQuery Plugins
Conclusion
With jquery.textanimation.js, you can easily add animation effects to text on your page. Refer to the methods introduced in this article and consider incorporating them into your website or application. Using animation effects appropriately can attract users’ attention and engage visitors.
We will continue to introduce various techniques and tools in web development, so be sure to check the blog regularly. If you have any questions or feedback, feel free to leave a comment below.
*Please use at your own risk.
Do not copy the Google Analytics tags within the demo page tags.
