LOGIN TO YOUR VISUALLY ACCOUNT
Dont't have an account? Create one
//resources and recommendations for
FAKING A SPINNING GLOBE IN HTML5
//which you can take for whatever it's worth..
1. BUILD A SPHERE-Y
Create an ellipse with a heavy white glow, which will become your horizon atmosphere.
Fill with an offset radial gradient with deeper-color origin near the bottom.
Add a back-of-the-sphere reflection to sell transparent shiny-ness.
Another semi-transparent radial gradient, this one originating near the top, fading out to nothing.
SAVE AS PNG ...or download mine at goo.gl/djptD
1. BUILD SPHERE-Y
Add an ellipse with a centered radial gradient, opaque at the edge, for the dual benefit of sweet atmospieric perspective and to obscure the troublesome edge effects of the cheesy animation.
Drop in a top-reflection gradient to make this thing really look like a glass ball.
SAVE AS PNG..or download mine at goo.gl/9Pw6Z
3. BUILD CARTO
Grab a map of the world and clip out the oceans. Preferably, your map projection looks squished nearer the poles, but whatever. Double your map horizontally so there is no gap in your animation later. Play with gradients, hue, and opacity to get the look you want.
SAVE AS PNG ...or download mine at goo.gl/k6rVc
4. BUILD CARTO
Make a copy of your foreground map -flip it horizontally and reduce its opacity. This backwards map helps sell your globe’s back-of-the-crystal-ball illusion.
SAVE AS PNG ...or download mine at goo.gl/yjVGT
WHAT TO ANIMATE AND CLIP
Transition the Carto Foreground Image from LEFT to RIGHT along the full extent of its width (increase X value). Tweak transition duration to get the speed you like. Loop this transition.
Transition the Carto Background Image from RIGHT to LEFT along the full extent of its width (decrease X value). Use the same transition duration. Loop this transition.
Draw a static circular arc in your canvas’ clipping region and drop in your transitioned Carto Background and Foreground Images.
HOW TO VISUALLY ARRANGE THE LAYERS
- Sphere-y Foreground Image
- Clipping Path
- Carto Foreground Image ->
- Carto Background image <-
- Sphere-y Background image
SHOW IT OFF
Did you try it?
Let us know how it went!