How to hide javascript animation outside of certain borders?

I'm new to the wold of javascript/jquery, but had this fantastic idea for an effect for my webpage. Let me explain the layout abit.

My website is contained within a wrapper div, which assures that my content remains at 1000px and centered on the screen regardless of the width of monitor (assuming the monitor is bigger than 1000px). This content contains a header image that is presently used to display a colourful image (1000x400px) displaying the title of the website/company/etc. So this image is the width of the content container.

I thought it would be cool to instead of having the name of the company set on the image, have it scroll left to right, right to left on the image. This can be done with jquery and the animate() function (or a function close to it). The problem is that once the website title has scrolled to one extreme of the webpage, it will overflow out of the 1000x400px image and outside of the content container - thus into the wrapper region, which is simply a grey background.

My problem is that I can't conceptualize a way to hide the scrolling text (which would be represented by a very high z-index) behind the background wrapper (which is a simple background, so the lowest index possible). I only want the section of the scrolling text that is over the 1000px-wide content container to be visible. Anyone would know how to hide what is over the wrapper background? I thought of maybe recreating the wrapper background with some divs delimited by the presence of the content 开发者_如何学JAVAcontainer; this div would have the highest z-index possible so it would hide anything that it superimposes. Is there a better/easier way to implement this?

Let me know if I'm not making sense :)

Pat

Maybe I'm missing something here, but;

If the scrolling text is a child of the wrapper div, then all that needs to be done is to apply the style overflow:hidden; to the wrapper div.