7 ms·
Google's HTML/CSS 3D Buckyball
- cesare 16y agoHTML/CSS + JavaScript.
- zbanks 16y agoInterestingly enough, they did it with "pure" HTML/CSS, plus 2 images for the nodes & connections. I was a bit surprised that they didn't use canvas, which seems to be all the rage these days. I'm assuming this implementation, however, works on IE.
- StavrosK 16y agoAre you telling me they didn't use JS? I know I should look at the source, but can't!
- arnorhs 16y agoThey did use HTML/CSS for display/rendering of the buckyball, but they also did use Javascript for animation and interaction. Just to be clear.
- zbanks 16y agoYes, sorry. I meant that they refrained from using canvas/svg/flash.
- noonespecial 16y agoIt should come with a warning that its gonna peg a cpu on my macbook with firefox. Google is my homepage. I don't expect to lose half my battery by opening firefox and stepping away for 20 minutes.
- VMG 16y agowho is downvoting this? It works flawlessly for me but for others this is a valid complaint.
- stanleydrew 16y agoThis actually runs fine on my nexus one. Based on other comments here I'm rather impressed with the performance.
- jackowayed 16y agoI'm a little surprised by that since it's just HTML and CSS. And mac chrome's having no problems; my fan's not even spinning.
- wlievens 16y ago> since it's just HTML and CSS I've tried gadgets like this many times (though nothing as cool as that buckyball) and it's been my experience every time. It's slow because it's just HTML and CSS.
- patrickaljord 16y agoVery fast here, chrome on ubuntu.
- wlievens 16y agoTrue, but Chrome is the exception, with it's awesome JS JIT.
- TNO 16y agoWorks beautiful on Fx b4
- riffic 16y agoWhat's a mackbook?
- noonespecial 16y agoA typo. Fixed. Thanks.
- deleted 16y ago[deleted]
- Truff 16y agoI actually had to restart my browser (FF3.6 Ubuntu).
- brosephius 16y agohappened to me too. I didn't notice it until I heard the fan blasting, and it took me a while to realize what was going on :P
- teamonkey 16y agoIt's very fast for me on Chrome for Windows but the fan kicked in as soon as I opened the page. Looking at the Chrome task manager it's using a huge proportion of the CPU compared to other tabs.
- tomjen3 16y agoTry to upgrade to Chrome - that should solve the issue. But yeah, it is a little waste full for something like googles home page.
- krisokot 16y agoCan anyone explain how they made it? I am not that good at HTML or CSS.
- jjcm 16y agoEmulated 3D - similar to how oldschool NES/SNES games did "3D" games. Each sprite is simply scaled down to make it appear further away. Transforms are used as well for the rotation of the node joints. The hardest part of all this is probably just the z-order business (the z-axis stacking).
- ashearer 16y agoTo expand on how the joints rotate: the CSS styles use a translation of a large CSS sprite image, which consists of 90 stacked images of the joint at various stages of rotation over 180 degrees. Even older browsers that only support translation transforms will work just as well. (Angles must be rounded to the nearest 2 degrees, which would explain some jumpiness.)
- est 16y agohttp://www.google.com/logos/2010/buckyball10-hp-bond.png http://www.google.com/logos/2010/buckyball10-hp-bond.png CSS sprites
- mgedmin 16y agoNo permalink?