The Art of Darkness

Silly Web Thing: Draggable Ghosts

February 25th, 2015 by Cobwebs

Draggable Ghost

Wanna see a trick? Click your mouse on that heart up above, keep holding the button, and drag. Presto! A ghostly axe-wielding bride who takes the “’til death do us part” thing seriously.

(If you don’t see the ghost, you may be using an older browser which doesn’t support HTML5. Sorry about that.)

This type of draggable image takes advantage of HTML5’s native drag-and-drop capabilities, which create a semi-transparent copy of an element when you grab it and drag it around. The images are particularly popular on Tumblr, where they’re used to display hidden messages or other now-you-see-it-now-you-don’t effects. The ghost above was created by octibbles; there’s another cute example here, made by a blogger who seems to specialize in these effects.

The images are fairly easy to create with your favorite graphics editor, since they really only require two things: A transparent background and a drawing or message which matches the background color of the page you’ll be displaying it on. When the image is dragged, the browser will “ghost” all of the non-transparent areas, turning the background-matching color a light grey and making it suddenly visible. (This assumes that your background color isn’t identical to the browser-ghost-grey. If it is, well…don’t do that.)

There are lots of tutorials for creating this kind of image; WikiHow and musings & sketchy lines have easy ones, but a quick search will turn up plenty more. For more advanced effects, check out this neat custom ghost image tutorial.

It’s a neat Easter-eggy thing to add to a site which doesn’t take a lot of time or effort. Fun!

Posted in Resources | 2 Comments »

2 Responses

  1. Kathy White Says:

    Stiffed. My browser is old (but I am older…..)

  2. xJane Says:

    This is cute! I am annoyed by transparent text (or even just text-of-a-slightly-different-than-I-am-used-to-hue) and so often select-all and read things that way. It’s kinda fun that these don’t show up if I do that!

Leave a Reply