So I'm delving into the world of javascript/jquery and an amazing idea popped into my head for a webpage effect. Let me break down the design a bit.
My website is neatly contained within a wrapper div, ensuring that the content stays at 1000px and centered on the screen no matter the monitor width (given it's larger than 1000px). Within this structure lies a header image currently showcasing a colorful display (1000x400px) featuring the website/company/etc. title. Essentially, this image spans the width of the content container.
I had a thought to take it up a notch by having the company name scroll left to right, then right to left across the image, utilizing jquery and possibly the animate() function. But, the catch is once the text reaches an edge of the webpage, it overflows beyond the 1000x400px image and outside the content container into the grey background region of the wrapper.
The challenge I'm faced with is figuring out how to conceal the scrolling text (at a high z-index) behind the background wrapper (with the lowest index possible). My intention is only to show the portion of the text overlaying the 1000px-wide content container. Any suggestions on hiding the excess over the wrapper background? One idea I pondered was recreating the wrapper background using separate divs delimited by the content container presence; these divs would possess the highest z-index to mask anything they cover. Is there a simpler, more efficient way to tackle this?
If my explanation seems vague, please let me know :)
Pat