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 text

var 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.