August 31, 2010

How to animate text using JavaScript

Question by Hema

I want to implement animated text i.e. moving the text from bottom (half of the page) to the top like marquee. I don’t get any good code. Does any one know how this is implemented in JavaScript or jQuery or DHTML?

Thanks in advance

Answer by Cipi

Same code as the answer below but, it sets the TEXT location to be at half the page’s height, and then animates it to top:

//Calculate where is HALF of the page (half the window height)
var start_pos = screen.height/2;

//Set starting TOP location
$(".text").css("top", start_pos+"px");    

//Animate to the END location, which is 0px
$(".text").animate({ top:0+"px" }, 5000, function() { alert("Animation Complete"); });

​

Answer by Starx

use jquery

  $('#mydiv').animate({
    top: 0
  }, 5000, function() {
    // Animation complete.
  });

Check the demo here

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!