Jquery Fly Text Script

Simple Fly text script using jquery that animates the text to produce the fly text effect.

Features

Can create dynamic letter animation effects on web pages using Jquery.
Users can customize the duration of the effect or the animation in the loop.
Letters can be exchanged all at once or one after the other.

Preview

JQuery Fly Text Script

Downloads

<html>
<head>
<title>Jquery Fly Text / Letters Script - Demo</title>
<script src="jquery.js"></script>
<script>
var count=0;
var length;
var mar=50;
var myloop;
var message="Hai, Welcome To HScripts .com";
var message_array=message.split(' ');
$(document).ready(function(){
var sds = document.getElementById("dum");
if(sds == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
var sdss = document.getElementById("dumdiv");
if(sdss == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
if(sdss != null)
{
length=message_array.length;
for(var i=0;i<length;i++)
{
$('div.flycontainer').append("<span style='opacity:0'id='"+i+"'>"+message_array[i]+"</span>");
}
start();
}});
function myplay()
{
$("#pause").show();
$("#play").hide();
count=0;
mar=50;
for(var j=0;j<length;j++)
{
$(".flycontainer #"+j+"").html(message_array[j]).animate({opacity:0},1000);
$(".flycontainer #"+j+"").html(message_array[j]).animate({marginLeft:0},100);
}
start();
}
function mypause()
{
clearInterval(myloop);
$("#pause").hide();
$("#play").show();
}
function start()
{
myloop=setInterval(function(){
change(count)
},2000);
}function change(myunit)
{
$(".flycontainer #"+count+"").html(message_array[myunit]).animate({opacity:1, marginLeft:mar},1000);
var mov=$("#"+count+"").width();
mar=mar+mov+5;
//alert(mar);
count++;
if(count==length)
{
clearInterval(myloop);
$("#pause").hide();
$("#play").show();
}
}
</script>
<style>
.flycontainer
{
background-color:#fff;
width:400px;
margin:0 auto;
color:#000;
overflow:hidden;
}
.flycontainer span
{
position:absolute;
color:#25185e;
}
</style>
</head>
<body>
<center>
<div style="margin-top:20px; "><h3>Jquery Fly Text Script</h3></div>
<div style="height:150px; margin-top:50px; ">
<table border="0" cellpadding="2" cellspacing="2" align="center">
<tr><td>
<div class="flycontainer" style="color:green; font-size:25px; margin:0px"></div>
<br />
</td></tr>
<tr align="center"><td><br /><br />
<div>
<img id="pause" onclick="mypause()" src="pause.png" style="cursor: pointer;" />
<img id="play" onclick="myplay()" src="play.png" style="cursor: pointer; display:none;" />
</div></td>
</tr>
</table>
</div>
<div align=center style=" font-size: 10px;color: #dadada;" id="dumdiv">
<a href="//www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a>
</div>
</center>
</body>
</html>

Click jquery.js to download.

Click pause.png to download.

Click play.png to download.

Release Date - 29-11-2013
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy paste the Jquery Fly Letters Script in your HTML page.
Download jquery.js, pause.png, play.png files and place the files in your folder.
Now run the HTML file in your browser to view the functionality of the script.
You can change the sentences for which you want to animate the changing effects.

License

This Jquery code is given under GPL License
i.e. Free use for those who use the codes as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here.
You can purchase the script if your requirements does not meet our GPL License terms.