Half a million members creating, sharing and exploring great visual content. Join us!

Header

Transcript

Faking a Spinning Globe in HTML5

//resources and recommendations for

FAKING A SPINNING GLOBE IN HTML5

//which you can take for whatever it's worth..


1. BUILD A SPHERE-Y
BACKGROUND IMAGE

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
FOREGROUND IMAGE

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
FOREGROUND IMAGE

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
BACKGROUND IMAGE

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

1. TRANSITION
FOREGROUND

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.

2. TRANSITION
BACKGROUND

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.

3. CLIP

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

FORE BACK

- 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!
@JohnNelson IDV
#HTM L5GIobe

Faking a Spinning Globe in HTML5

shared by johnmnelson on Mar 28, 2012 in How To

Faking a Spinning Globe in HTML5

shared by johnmnelson on Mar 28, 2012 in How To

4K views

2 faves

0 comments

So cheesy but surprisingly convincing. Here’s some how-to guidance for making a fakaroo spinning globe in HTML5. As is the case with HTML, there are always five different ways to do the same thing...
Tags: html5, html, globe
Rank: 76 of 1812 in How To

Published by
johnmnelson

Designed By

johnmnelson

Embed Code

Switch to Wordpress Code
Click below to copy
Customize size

Tell your story visually before December 31st and get a free iPad Air!*

The holidays are a great time to tell your brand story. From Black Friday trends and Mobile Shopping guides to the Best and Worst Times to Book Travel and Thanksgiving etiquette, the Visually team will help you craft your brand's unique stories and raise your social profile during the noisy holiday season.


*Requires $10k minimum purchase
s