With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery. Here is live demo.
javascript:
$(’.container .flying-text’).css({opacity:0}); //set all text opacity to 0
$(’.container .active-text’).animate({opacity:1, marginLeft: “350px”}, 4000); //animate first textvar int = setInterval(changeText, 5000); // call changeText function every 5 seconds
function changeText(){
var $activeText = $(”.container .active-text”); //get current text
var $nextText = $activeText.next(); //get next text
if($activeText.next().length == 0) $nextText = $(’.container .flying-text:first’); //if it is last text, loop back to first text$activeText.animate({opacity:0}, 1000); //set opacity 0 to animated text
$activeText.animate({marginLeft: “-100px”}); //set animated text position to default//animate next text
$nextText.css({opacity: 0}).addClass(’active-text’).animate({opacity:1, marginLeft: “350px”}, 4000, function(){$activeText.removeClass(’active-text’);
});
}
HTML:
<div class=”container”>
<h3 class=”flying-text active-text”>I believe</h3>
<h3 class=”flying-text”>I can</h3>
<h3 class=”flying-text”>Fly</h3>
</div>
CSS:
body{
background-color:#000;
}.container{
background-color:#000;
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}.flying-text{
margin-left:-100px;
}
Check this live demo.
waiyan | 
1:01:00 am 
December 20, 2008 @ 9:36 pm
Thanks for this tut. I’ve learn a lot from this.
December 22, 2008 @ 11:35 am
Glad to hear that.
February 9, 2009 @ 9:38 pm
Nice tuts. ^_^ pleasure to meet u r blog.
February 11, 2009 @ 1:05 pm
Nice!
February 11, 2009 @ 5:08 pm
Thanks!
November 8, 2009 @ 4:41 pm
First of all thank you for great tutorial.
I would like to know, why the text is not smooth ?
i mean: if you use clear background and green text you can see black pixels around the text.
November 17, 2009 @ 12:07 am
[...] jQuery: Flying Text With Fade Effect [...]
November 21, 2009 @ 10:21 pm
[...] jQuery: Flying Text With Fade Effect [...]
November 23, 2009 @ 10:55 pm
firstly tnx for this good tutorial , how can i extend width of the text i mean i want text will going from left to right along page ? tnx
December 1, 2009 @ 3:52 pm
[...] jquery- flying text with fade efekt: demo ve download metinlerinzi kaydırmaya yarayan bir eklentidir. metinler solarak [...]