6 ms·
Pure CSS3 dancing Bender
- AtTheLast 13y agoHa. This is great!
- mattkrea 13y agoWhat people can do in CSS3 blows my mind. I love this!
- mustapha 13y agoAlways find myself stunned by the capabilities of CSS.
- Tyrant505 13y agoFor those of you who are bound to ask the point, this is pure hacking. You are given a technology and you produce a result, sometimes for the fun of it! Thanks for this! I learned a bit.
- apaprocki 13y agoThis is nuts -- but sadly dancing Bender is not too practical. (Unless the dancing trend catches on and GitHub releases the dancing Octocat to production...) For more practical CSS madness, I'd recommend Ana Tudor's creations[1]. She had a cool talk at CSSConf.eu about the math behind building some of her CSS creations.[2] [1]: http://codepen.io/thebabydino/public/ http://codepen.io/thebabydino/public/ [2]: http://www.youtube.com/watch?v=w9HeWBH_kvg http://www.youtube.com/watch?v=w9HeWBH_kvg
- Tyrant505 13y agoGreat additions but again read my post.
- apaprocki 13y agoYeah, I don't want to be critical -- just wanted to point to some other lower-level shapes that might be easier for others to learn from and build upon. 100% believe we need more dancing characters, not less.
- anigbrowl 13y agoIt looks like you're designing a user interface. Would you like some help with that?
- acomjean 13y agoLets not go back to having animated office supplies offering us advice. That was best left in that last century... For the young ones: http://en.wikipedia.org/wiki/Office_Assistant http://en.wikipedia.org/wiki/Office_Assistant
- bilalq 13y agoI've seen her work posted around before, and always found myself really impressed. Thanks for the link to that video, I think it may have sparked an interest in geometry for me. And I disagree about the practicality of a dancing bender. It's a tech demo if nothing else. I can picture a future where things like this are much easier to accomplish in CSS and we move on from using traditional images.
- Kiro 13y agoWow. Dancing Bender is cool but it's basically just keyframes. Ana Tudor's CSS is on another level.
- pvnick 13y agoImpressive! Great job.
- smaili 13y agoHacker's equivalent of animated gif :)
- null_ptr 13y agoThe legs slide horizontally off Bender's ass on Firefox 24 on Linux :-( Nevertheless, great work!
- Sami_Lehtinen 13y agoI just were wondering the same and if that's intentional to make it funnier. Because hands seem to stick attached to the body well.
- camkego 13y agoWorks on iOS 7 Safari and Chrome for me, but not IE10. It seems to bring into question the practicality of multi-browser support of these complex 'apps' utilizing fancy CSS and HTML5.
- girvo 13y agoA lot of the neat features used in demo's like this (although I haven't checked this ones code specifically yet) often rely on prefixed features and the like; it's more for showing what could be, rather than what is per se.
- shmerl 13y agoI thought it's by design :) Reminded me the undead break dance from the inXile's Bard's Tale: https://www.youtube.com/watch?v=sP_7nFldRtY https://www.youtube.com/watch?v=sP_7nFldRtY
- DavidPlumpton 13y agoThat's because Bender's metal ass is so shiny.
- com2kid 13y agoLikewise, doesn't work in FF24 on Windows either, nor in IE10. I am wondering if this works in anything aside from Webkit based browsers.
- anigbrowl 13y agoYou're looking at it the wrong way. This Bender features detachable locomotors.
- browserspot 13y agoholy mother of god! this is absolutely awesome!
- sown 13y agoneat! I've gotten into CSS3 and JS recently but I'm not sure how this works. Can someone explain to this old C dog the principles of how it works, though? I thought this would require JS to work? I apologize in advance for being out of touch. :(
- lcnmrn 13y agoYou set up your elements in HTML, then do the keyframes and reposition the elements in CSS. I did this: http://lucianmarin.com/peculiar/ http://lucianmarin.com/peculiar/
- kaoD 13y agoSeveral <div>s with the same id... heresy!
- northband 13y agoLooks awesome while listening to Another Brick In The Wall Pt.2
- lubujackson 13y agoHow does.. I don't even... Is there some tool they used to make this? Because my human brain can't imagine how this came to exist.
- aegiso 13y agoLooks like pretty clean handmade CSS. I don't see any magic here. Modern CSS3 lets you build arbitrary geometry with arbitrary animations if you're crazy enough. What I do see here is an excellent grasp of Cartesian geometry and some serious dedication. Which I suppose is no less magical.
- ciokan 13y agoYes there is: http://www.sencha.com/products/animator/ http://www.sencha.com/products/animator/
- lele0108 13y agoPure CSS horse: http://codepen.io/anon/pen/tvaio http://codepen.io/anon/pen/tvaio
- ntumlin 13y agoI think that's cheating.
- padolsey 13y agoOh, clever you.
- jroseattle 13y ago// center the horse, they like that Pure comment gold.
- ars 13y agoThere's nothing CSS about it. It's simply an image.
- duiker101 13y agoThat's the joke.
- Zecc 13y ago> This Site Totally Doesn't Work Without JavaScript. Fail!
- ciriarte 13y agoLovely, congratulations. This kind of thing inspires me to learn more and more!
- arbutus 13y agoThis is really neat. I'm really interested in seeing how all these new fancy CSS3/HTML5 features shape the evolution of casual online games. Back in the day it was either static images, like the Neopets sort of thing (which are still pretty common with young kids I think - Webkinz is a cash cow and that site looks straight out of my childhood), or slow awful Flash games that usually didn't have any data persistence. Even if this Bender example is kind of hacky as other comments are indicating, the possibilities still seem pretty limitless.
- sillysaurus2 13y agoFor an example of one modern JS game, see http://www.bombermine.com http://www.bombermine.com I'm not aware of any games that use CSS3 for the ingame graphics, though.
- xer0x 13y agoboom!
- blt 13y agoIt seems like we should be seeing heavy duty graphical editors that output CSS3 animations. Any tools exist yet?
- deadsnake 13y agoGuess CSS is basically a Turing complete language.
- BinaryBullet 13y agoUnfortunately Bandcamp's embed doesn't seem to be working in Firefox/liveweave for me, but here's a theme song added: http://liveweave.com/bhu7HB http://liveweave.com/bhu7HB
- liamondrop 13y agoNot to detract from the creativity here, but the id attribute specifies its element's unique identifier[1]. Strictly speaking, this should never happen: <div id="b7"> <div id="b71"> <div id="b71"> <div id="b71"> <div id="b71"> ... [1] http://www.w3.org/TR/2013/WD-html51-20130528/dom.html#the-id-attribute http://www.w3.org/TR/2013/WD-html51-20130528/dom.html#the-id...
- themodelplumber 13y agoYeah, not sure why it's not throwing a bunch of jQuery errors in the console
- Kiro 13y agoI don't see any jQuery or even JavaScript being used.
- JosephRedfern 13y ago> Pure CSS3
- dspillett 13y agoI don't think any Javascript is in use at all here, but if it were I would not expect errors but instead simply unexpected behaviour as browsers tend to just try do something if what you are asking isn't clear (for instance if a jquery selector returns nothing, any changes you chain after the call just apply to that nothing instead of complaining that they expect to have some nodes to act on). Multiple elements with the same ID is wrong of course, so you can't guarantee what will happen if you use and ID based selector: three equally (in)correct interpretations would be "act on the first element you find with that ID", "act on all elements with that ID", and "error because we don't expect to find more than one". By breaking the standard you are exposing yourself to undefined behaviour - the browser can do what it likes and each environment might do something different.
- ajtaylor 13y agoRight after seeing Bender dance, that was the very first thing I noticed as well.
- yngccc 13y agoremind me of CSS 3D teapot. http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot-in-html-by-brian-beckman-and-erik-meijer-1266 http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot...
- ck2 13y agoI can't believe this show is off the air. Again. Forever. :-( Anyways, I hope ad people don't catch on to how CSS is a bit harder to block than JS.
- larkinrichards 13y agoTry zooming in your web browser for a ghostly -- some might say spooky -- disembodied bender. Just in time for halloween.
- pouzy 13y agoThis must be what CSS3 has been invented for. I can die in peace now.
- digitailor 13y agoI love when people see the potential to use HTML structure as a makeshift DAG. Similarly, once the DOM got fully grokked in the mid-2000s, it was if the web changed overnight. From flat documents to a flexible graph. And to do this without JS? We're talking no actual imperative code here, just dead structure and presentation markup. This is one of the first CSS animations I've seen that works flawlessly for me, at least on the iPhone. I also noticed the non-unique ID attrs as is noted below, but let's be real. With that amount of CSS to conceive of and write, would you really glance twice at the twenty lines of HTML you're using as a fly-by-night DAG? For a non-commercial passion project? The creator of this was in the ZONE! The pure insanity makes me grin and long for the pre-teen days where there was time for this. All the ANSI art, the HyperCard stacks, the strange games made using dirt-cheap language implementations. Sigh, but a nice sigh. Also makes me damn grateful for open source and standards.
- dreen 13y agoAfter a while the legs and to some degree arms go out of sync with the rest http://i.imgur.com/EMGqXA3.png http://i.imgur.com/EMGqXA3.png
- J_Darnley 13y agoI call bullshit on the "pure css" part. Nothing works if you have javascript turned off.
- TranceMan 13y agoIt's actually liveweave which doesn't work with javascript turned off. This works if you don't have javascript on: http://fiddle.jshell.net/w5GFR/show/light/ http://fiddle.jshell.net/w5GFR/show/light/
- vidarh 13y agoThat's because the site that's hosting it depends on javascript to serve anything up, not the demo itself.
- filipedeschamps 13y agoJust WOW. Good job.
- moreentropy 13y agoMade my day. I need this for my 404 pages. Is anything known about the author or license of this work? Will Comedy Central likely object?
- kfury 13y agoThe real Bender's eyes have square pupils.