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.
Well, this is just a vague idea, but it might get you started.
You could:
This way subsequent click events won't find the grey class and the text box won't clear the user's stuff.
Try this :
<body onload="changingBG()">
<input type="text" id="thisBox">
</body>
here is the script: you need to have an array of images that you want to keep in background, change the timer as u want:
function changingBG(){
var inboxEle = document.getElementById("thisBox");
inboxEle.style.backgroundImage = varArray[x] //this array contains various images
t=setTimeout("changingBG()",1000);
}
These are the steps I would take...
Create the text input field and give it a class with a background-image attribute that points to an image that has the text you want to display in the order you want listed vertically.. So your image would look like
Newsletter Sign Up
Enter your Email Address
Then you can use a CSS Sprite approach to shift the image up at the rate you want using a library like jQuery to animate it, getting the same effect....
Then you need an event binder on the input box that would clear out the background image when the user clicks in the box OR if the box contains text
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.