greetings, I’m new to this site, hope someone can give me some ideas…
I’m doing a spx header (multiple scrolling background images) for my website, crimegameonline.com where the home page is doing what I want (though I might try to do a trail effect). Problem comes if you go to crimegameonline.com/mobster-game-p2i.php (via sidebar on home page, Mobster)…
Right now, its two of the same background images scrolling at different speeds…
css:
#scrollerAll {
position: relative;
height: 70px;
background-image:url('../bitmaps/scrolls/chemLayer2c.png');
background-repeat: repeat-x;
}
#rollerTwo {
position: relative;
height: 70px; /* changin wont matter cuz this inner layer */
background-image:url('../bitmaps/scrolls/chemLayer2c.png');
background-repeat: repeat-x;
}
js:
function MoveBackGround () {
window.cssXPos++;
if (window.cssXPos>=window.cssMaxWidth) {
window.cssXPos=0;
}
toMove=document.getElementById("scrollerAll");
toMove.style.backgroundPosition=window.cssXPos+"px 0px";
}
function MoveBackGround2 () {
window.cssXPos2++;
if (window.cssXPos2>=window.cssMaxWidth) {
window.cssXPos2=0;
}
toMove=document.getElementById("rollerTwo");
toMove.style.backgroundPosition=window.cssXPos2+"px 0px";
}
function StartMove() {
window.cssMaxWidth=800;
window.cssXPos=0;
window.cssXPos2=0;
setInterval("MoveBackGround()",70);
setInterval("MoveBackGround2()",30);
}
html:
okay, no problem. It works. Note it is using the same image, which is what I want for performance.
BUT what I want is for the slower one to be like how you see a 200% image. So the fast is moving over (the top 1/2) of a 200% image. I could photoshop myself a second image and save it zoomed up, but that is lame, I have a good image right there in memory!
Any ideas? I’d rather not use Jquery.
