Uncategorized – CreativeJS http://creativejs.com The very best of creative JavaScript and HTML5 Wed, 03 Jun 2015 20:19:39 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.1 GIFCTRL http://creativejs.com/2012/11/gifctrl/ Fri, 16 Nov 2012 11:59:49 +0000 http://creativejs.com/?p=4830 Continue reading →]]> GIFCTRL
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:

Check out GIFCTRL!

]]>