How is this created?

Hi all,

I chanced upon this site - http://www.wwoof.net/

The globe in the site spins a full 360degrees.

How is this effect achieved via JS?

Appreciate any pointers. Thanks!

 

They're using canvas - why, I'm not entirely sure - it doesn't seem to be doing anything except rotate here, at least. If that's all it does, just make it a spinning gif instead. (Granted, the globe is transparent, which you won't really achieve properly with a gif, but the effect could be done pretty much the same). For the effect they're using this: http://www.wwoof.net/fileadmin/templates/js/site.js - however, that is linked to a lot of different js-files, and from the code it seems the spinning globe is supposed to do a lot of different things, but I'm not seeing it - might be something blocking the effect here.

 

Hi PoPSiCLe,

Ahhh okay, thanks! So it's a combination of HTML5 Canvas and js?

In fact, when you select a country, it will rotate to the country on the globe and indicate with a dot. Pretty cool stuff.

 

Yeah... or it won't. Depending on what kind of scripblockers and browser you're using, I'm guessing. But yes, they're using a ton of js and canvas in unison. You can find the whole list of js-files if you click on the link I provided, although there might be more, of course - there are about 10-20 included files on the index-file, which again screams "ineptitude" when publishing.

 

A GIF cannot be arbitrarily rotate to any point (it will rotate to be centered on any country chosen from the SELECT). A GIF would be twenty to 100 times larger than the vector code used to create it at that size. A GIF is limited to 256 colors. A GIF is not dynamically scalable. GIF's generally speaking are outdated crap when it comes to having animated, well... much of anything. Even the wankers at 4chan are switching over to webm

Choose Afghanistan, it will rotate to Afghanistan, Choose the US, it will rotate to the US. Choose China, it will rotate to China. Try doing that with GIF files smoothly from point to point! I could actually do that, it would probably also be around 20 gigs in 38,416 separate .gif files.

For what they are doing the code is excessively large, but really this is just webGL. If I had the raw 3d map data I could probably implement it in a wee bit less code, but if you are going to do real 3d in realtime WebGL is probably the best choice even if some crappy older browsers don't entirely support it yet. It's a far better solution than flash or *LAUGH* the thousands of separate GIF needed to accomplish the same functionality.

As to:

ALL CANVAS is JavaScript; it shouldn't even have a HTML 5 element and sure as hell shouldn't be called "HTML 5" since, well, without JavaScript the CANVAS tag does jack ****.

Again, it looks like it's just WebGL. MDN has some decent articles on that:
https://developer.mozilla.org/en-US/docs/Web/WebGL

Though I disagree with MDN's outdated scripting methodologies like using the stupid malfing "onevent" attributes in the markup, or even just bothering to put the redundant and pointless CANVAS tag in the markup. I say this because if it's a scripting only element it should be added by the script not sitting there as markup bloat. The only purpose it could actually serve as a markup element is to be redundant to NOSCRIPT!

CANVAS existing as a tag is just another example of the people who created HTML 5 (the WhatWG) not knowing enough about HTML, CSS, JS, accessibility, or semantics to have been creating a new "specification" in the first place. At MOST it should exist as a new non-markup node-type.

 

@deathshadow: yes, I realised that afterwards - the point was, the js didn't do jack when I tested the site first time around - not entirely sure why, but trying to select a country just bounced me back to the top of the site, with no change in the rotating globe - hence my comment. Given the usage (well, regardless, really) it makes sense - it just seems a bit elaborate just to point out where something is. Blah.

 

Are you using an outdated copy of Firefox or a bad fork that's two years out of date, Opera 12/earlier, or IE10/earlier? They have no webGL support. That's the most likely culprit and the big "risk" of such code. WebGL also fails on some linsux flavors that don't provide the OpenGL interfaces needed to make it work thanks to X11 implementations being the rubbish that is directly responsible for Linsux being a rinky toy so far as being a desktop OS is concerned.

No clue if Safari supports it properly if at all, what with all their actual talent jumping ship the moment Google forked webkit into blink.

Though being a presentational affectation so long as the select actually did something (which sadly it does not) it would be ok to use the technique. PROPERLY written the page should detect that the context creation failed and either alert or insert into the document a warning to that end...

Which is why the concept and technology used is ok, the implementation is not.

 

Do you THINK I'm using an outdated version of anything? Really, man, that's just insulting. I do have some boxes here with old shit running, but on my main desktop, everything is running autoupdate - I'm guessing it's a plugin of some sort messing things up, but I haven't bothered looking into it - if it happens again, I'll do some digging.

 

Didn't mean it to be, I'm still using Opera 12 as my primary browser as much as possible / when possible just because it's the last browser to actually HAVE things like accessibility aids built in or to have what I would consider a modern UI -- ChrOpera, much less every other browser out there feels like a trip in the wayback machine to IE 3 mac so far as the UI is concerned. Though admittedly, I've skinned the crap out of opera 12 as the defaults were rubbish! -- I need like 80 extensions to drag FF even CLOSE to what I expect in a browser, and there ARE no good extensions for ChrOpera or Chrome to make it "useful" for me. I'm really hoping that Vivaldi starts catching up faster in terms of implementing all the useful stuff Opera told it's users to go plow themselves over.

Or you could just be one of those folks using Iceweasel because "oh noes, haz tr4d3m4kz" FSF style nutjobbery; meaning you end up lagging behind FF usually by two or three versions. (who knew swapping out trademarks and icons took six months?)

There are a lot of reasons one might end up on a unsupported browser, which is why graceful degradation is so important. (and is where the site being discussed falls flat on it's face IMHO)

 

Well... I use Firefox as my main browser, because of the plugins available for it. I dunno, I don't really need that much stuff to make the browser do what I want (apart from AdBlock and such) - I use quite a few plugins, but I don't think I've got more than about 20 installed. Most of it, apart from Firebug and webdev-toolbar is stuff like video downloaders, custom download-managers etc.

 

Well, there are many things I "need" that were built into Opera, that chrOpera and Chrome cannot be extended to do or don't do properly when extended. One of the biggest is portrait tabs -- For FF I can at least add "Tree style tabs" and then turn off 70%+ of it's goofball functionality (like the wierd indenting and grouping nonsense) and it will turn off the tabs at the top. The attempts at doing this with extensions in Chrome/ChrOpera end up in a separate window kind-of attached that doesn't remove the top tabs... when really it is SO much more useful than the idiotic halfwit tabs across the top I cannot fathom why it's not built into EVERY browser. (Again, Vivaldi is at least trying)

But then I need "clippings" to replicate Opera notes, rocker navigation, vertical toolbar, UI fixer, theme and font changer, smartest bookmarks bar, stylish and greasemonkey for user.css and user.js functionality, nosquint to make all the crappy shit coded websites even close to usable, secure login to try and replicate (badly) the wand... download manager tweak to force the bloody things into a tab (and really ALL FF download managers piss me off, as does the idiotic halfwit "save image" showing up on the DL list), Custom buttons to replicate the most basic of functionality like "Close current tab and go to next" and "close current tab and go to previous" (stuff user buttons in Opera has let me do since Opera 7 that is NOWHERE to be found in the steaming pile known as ChrOpera)

... and I'm STILL searching for a mail client that doesn't piss me off; the standalone version of M2 is a train wreck, thunderbird is worse, and thanks to the scripttards pissing all over things webmail which I had thought was poised to supplant mail clients has now sent me running and screaming back to them.

But at least FF lets me TRY and make the browser work with the basic functionality Opera used to have built in... too bad every upgrade half of them stop working for a month and every time you add something you run the risk of turning it into a buggy unstable mess.

Which is why much like the web development community, all I have for the major browser makers right now are two giant fingers; one for them, and one for the source they code in on.

Basically, I got spoiled by a decade of having an actually USEFUL UI with actually useful functionality built-in for making all the garbage websites at least usable thanks to Opera 8.5 / newer. ChrOpera was such a massive slap in the face and general "Go **** yourselves" to users... now that Opera 12 is becoming more and more problematic with sites being broken in it (particularly the recent changes to HTTPS) it's just adding another reason to why I'm one step removed from ripping the cable out of the wall and saying "screw this" altogether.

Well that or buying a slew of plane tickets like a second rate Jay and Silent Bob to go thin out the numbers at various companies locations.

 

Well... personal preference. I have no need for any of the things you're talking about (maybe apart from a decent download-manager, but I'm quite happy with DownThemAll) - no need for portrait modes or tree-tabs, I just keep them on top and if need be, group them into separate tab-groups. Don't use notes, no idea what rocker nav is, vertical toolbar... nah, not for me, I've no problem with the UI, nor with the themes and fonts, don't use bookmarks (very rarely), stylish and greasemonkey I used to install, but I gave them up - too much crap running on them as well, and I can't be arsed writing my own stuff for small annoyances. No need for nosquint, not sure what you talk about for secure login? Wand (in opera) is the auto-fill of forms, isn't it? Custom buttons... well, I rarely need that, but there are plugins for Firefox that allow you to create everything from simple button-combinations for certain tasks, to macros.
And I don't use mail clients - I use Gmail / Google Apps - it works fine for me, and I have access wherever I am, regardless of device.

 

That's some interesting discussion about Opera! i've personally used it a few years ago but stopped. I just downloaded it to give it a try.