In celebration of GIF earning the ever prestigious honor of being named Oxford American Dictionary’s “Word of the Year”, we present GIFCTRL. This clever little site allows you to link to a GIF (or cycle through several examples by clicking anywhere on the page) and “scrub” through the individual frames by moving your cursor across the screen.
The JavaScript sorcery at play here is actually a lot simpler than one would think—the trick is that the uploaded image has its frames split out and recompiled into one long background image that is served back to the client. The distance of your cursor from the left edge of the window is used to create a percentage that determines how much of an offset to display using the background-image property.
For those of you curious to try your hand at this yourselves, here are a list of libraries you can investigate:
- PHP: Image Magick
- Python: PIL
- Command Line: Gifsicle
Check out GIFCTRL!