Wednesday, March 28, 2012

How to Fake a Spinning Globe in HTML5

----------
UPDATE
----------
Don't even bother reading the post below. Just go right over to Derek Watkins' D3 globe.
----------

Some time ago we made a fakaroo spinning globe as a slave graphic for a user's choice of global region on the landing page of a client's portal.  It was surprisingly convincing and we posted a quick tutorial on how to fake a good-enough 3D rotation effect in 2D, with Silverlight.  Some folks have found it useful and I'll get the occasional request for the source or at least the assets (I've added DropBox links to them below the infographic down there).

Here's an infographic covering that same concept from an HTML5 perspective, which isn't all that different, along with links to the image assets.  As is the case with HTML, there are always five different ways to do the same thing.  This graphic illustrates the concepts and the steps.  You may or may not find it helpful, but I hope you at least find it interesting and if you try it out I really hope you post a link and/or tweet about it (#HTML5Globe).

Happy faking!




Here's an old tutorial made in Silverlight.  The concepts are analogous in HTML.

Here are the image assets that you can help yourself to, as a time saver.  Three out of four of these are semi-transparent and white, so don't think they're empty when you can't initially see them...

Posted by

5 comments:

  1. Chris BaldelomarAugust 17, 2012 at 9:53 PM

    Hi John, I came across your video and webpage when I needed to figure out how to make a rotating globe on my client's website. I was very impressed with your though process that I decided to make a plugin for it using jQuery. Thanks for your post. Below is a link to my SpinningGlobe plugin page. http://webplantmedia.com/jquery/2012/08/rotating-spinning-globe-with-earth-map-using-jquery-and-javascript/

    ReplyDelete
    Replies
    1. Chris BaldelomarAugust 18, 2012 at 5:20 PM

      I updated my url to the following. http://webplantmedia.com/jquery/2012/08/spinning-globe-jquery-plugin/

      I hope everyone enjoys this plugin!

      Delete
    2. john.nelsonAugust 22, 2012 at 2:17 PM

      Thanks Chris. Here's a version we made with CS3 that might work for folks. It's only set up for Chrome and Firefox. http://dl.dropbox.com/u/17180596/SpinnyGlobyThing.zip

      Delete
    3. maddyDecember 19, 2014 at 2:35 AM

      hi john, can u give me tutorial for spinning globe with product list in css3 or jquery plz send me replay i'm wetting for..

      Delete
  2. UnknownDecember 18, 2013 at 7:28 AM

    @john.nelson: That's a very clever use of mask! No canvas or anything needed. Cheers!

    ReplyDelete

Subscribe to: Post Comments (Atom)