How to use .animate with text instead of a image?

I’m working on a website where I’ve found a jQuery plugin where to scroll through a wide image to position a headline. But I want to make it more dynamic so instead of using an image I just want to display a H1 tag.

The original code line is:

$('h1').stop().animate({backgroundPosition: '(-980px 0px)'}, $speed );

And the CSS is:

#header h1
{
    width:940px;
    margin:0 auto;
    text-indent:-9999em;
    overflow:hidden;
    background:url("../images/h1_title.png") no-repeat 0px 0px;
}

I want to remove the image and the text-indent and just display a H1 headline but when I do that, it just changes the H1 and not scrolling as it does with the image.

Is there any way to “convert” the jQuery code above to work on a H1 text? I guess that the background-position should be removed and just “scroll” and slide in the H1.

I开发者_如何学编程f I've explained myself poorly, please say so and I'll try to clarify.

Sincere

- Mestika

---

Set overflow: hidden on the h1 and then place the text node in a div and animate its left property.

---

Ofcourse, it is not "scrolling". If you give in animate() parameters:

animate({backgroundPosition: '(-980px 0px)'}, $speed )

It will "scroll" background position. For text effects, you should consider other effects, that "do some scrolling" with text, like modifying its position or use some block-level jquery effects.