Have an image pop in from the edge of a page, and slowly disappear [Archive]

Sarteck

02-13-2012, 08:48 AM

I have a vague idea on how to code it, but it just seems to me like it's something that's probably already been done, but I just don't know how to word the search right.

I have an image that we will call PopInImage. I want this image to "pop into" the screen from a random edge, just sit there for a second or two, and then go away.

Example, I'd have Chris Hansen pop down into a page from the top, stare at the user for a second, then withdraw back to outside the screen top.

(It's for some practical jokes on my forum users for April Fools Day, heh.)

Could someone point me in the right direction (hopefully at a pre-written script)?

djr33

02-13-2012, 04:40 PM

If you don't want animation (just appearing/disappearing) this is pretty easy with Javascript. Use CSS to position your image anywhere you'd like on the page, and set it to "display:none" or "visibility:hidden". Then when the page loads (<body onload="...) make the image visible, set a timeout for maybe 3 seconds and set it to invisible again.

If you want animation that's more complicated. I don't know if there's anything exactly like you're describing, but you could put it together from existing components.

But if you want something that is premade, you could look into ad scripts-- that's the only thing I can think of that displays that way. Just search for various types of ad scripts until you find the right one. Then just use your image instead of the ad.

You might also want to use a cookie to remember who has already seen it, so it doesn't reload on every page. (That's optional of course.) And that's easy-- just use an if statement to check if such a cookie exists, and if not display the image and also set a cookie. Then it won't happen again.