Question

I’m looking to add a textbox on my website that captures a single email address. Behind it, I would like scrolling (or sliding) images to be a “hint” for what the field should be.

Example: http://steamboat.com/ – the “Newsletter sign up” toward the top of the page.

I can find plenty of jQuery plugins that provide a plain text “hint”. Where should I start looking to add this additional affect?

Note: I do not want to add any flash elements on the page.

Answer 1

you can do this with plain javascript.

initialization: get a reference to your input element. set the background image using the style property

emailInput.style.backgroundImage = "url('emailbackground.png')";
emailInput.style.backgroundPosition = '0px 0px';

also declare variables to track running y offset, the height of the image in pixels, and if you want a staggered roll like on steamboat, how many steps you’ve moved and a timerID.

you’ll have two functions- one will start an interval timer where the position of the image will change, the other will call the first function to restart the interval whenever you pause the background.

first the ‘start’ method:

function startScrolling() {
    // start the process of moving the image
    stepCounter = 0;
    timerID = setInterval(updateScrolling, 10);
}

the ‘update’ method :

function updateScrolling() {

    // update the y offset
    stepCounter++;
    y = (stepCounter * 1) % imageHeight;
    emailInput.style.backgroundPosition = '0px ' + (-y).toString() + 'px';

    // check for changes to timing
    if (stepCounter >= steps) {
        clearInterval(timerID);
        timerID = setTimeout(startScrolling, 1000);
    }
}

this example is set up to move 1 pixel for every step taken. you can provide a fixed value or derive it based on image height or whatever. if we’ve completed all the steps for this cycle, the interval is stopped and a longer timeout is set for the restart function.