This effect is off course a hack in the sense that it produces a novel result, but it still only makes use of standard browser capabilities.
One of the few geometry formulas that I have committed to memory is the relationship of the points on a circle and the radius: x^2 + y^2 = r^2
img tag that is position so that it shows a particular row of the source image (see below). The
img tags also have their size set according to there position in the sphere so that the image is scaled more at the top and bottom of the sphere to simulate foreshortening. This gives some illusion of perspective – on one axis at least.
Shading the sphere
The shading is simply a transparent PNG that is absolute positioned on top of the circle. I rendered this image in Inkscape – it's just a circle with radial shading applied, but it looks convincingly sphere like.
Animating the sphere
This sphere is animated by moving the
img tags in each
div. The divs have the
overflow: hidden; style set, so that only the required number of pixels are shown. The rate at which each row moves is based on the width of the row in the sphere. Rows at the top and bottom of the sphere scroll more slowly than the middle because they have been scaled down.
Alas, its not very fast (at least on my machine). Scaling img tags is processor intensive and wasn't really meant to be used dynamically like this. It could possibly be optimized by pre-processing the map so that the browser needn't do any scaling of its own, but frankly I have satisfied my desire to find out if it is possible at all!
Here's the code. As you will see, its not designed to be re-usable and frankly it uses up too much processor power to be a practical effect on a web-page, but you are welcome do do whatever you want with it! It uses the excellent JQuery library.