Man, this gave me a pretty sweet dose of nostalgia. The music reminds me of Billy Bussey's portfolio, from good 10 years ago. It was a mix of flash and 3D modeling.
My best friend @wengerstoybus[1] made this! Fun fact, he actually manually illustrated each animal in Illustrator, and then exported them to images that he loaded up in the browser. He then wrote some really quick ’n dirty JS so that he could click each of the points in the image, and he’d get their coordinates fed back to him once he’d completed a whole shape. He could then just plug these coords into the CSS etc voila!
Lol how do people get this good at css. Whenever I get a css ticket at work I inevitably find myself in the chrome inspector twiddling levers and switches until it looks juuuuust right... And then doing it all over again in a day after QA kicks it back with a "misaligned on Firefox" comment
I have a Diploma of College Studies (Canada) in Multimedia Integration.
We learned how to create animations, how to render 3D models, how to do videos editing, how to do web front-end (advanced css + js), how to do backend web programming and how to create native apps.
It's a lot easier to be good at css when you actually learn it from teachers.
In the past, the hardest thing about learning CSS had little to do with the language itself, but in dealing with inconsistencies for specific browsers (like "Firefox", as mentioned).
Recent efforts by browser manufacturers to render CSS in accordance with standards, along with the advent of pre/post-processing tools, have made it easier for developers to focus on the language.
Fair, I've only been doing this a year, my older colleagues laugh strangely whenever I complain about browser inconsistencies. I'm of the understanding I live in a quite different world :P
This one isn't actually /too/ complicated. It certainly uses some advanced techniques -- transitions, clip-paths, nth-child -- and I'm not sure (haven't checked) if or how it works in browsers other than Chrome, but the fact that you _know_ you'll have 30 shards greatly simplifies everything.
If you can have a designer draw up the basic design, then you can one-by-one take the shards & put them into place with CSS. From there you can set up some animations on specific shards to make it seem like everything's moving together. From there, you basically have one animal. It'd be time-consuming, but would work.
The css selector for a particular animal's shards start with a `.<animal>` class selector, so that you change the animal class in a parent and all the shards move into place.
It looks like they're still using some javascript to set "states", which seem to trigger animations. I'm honestly not sure why they decided to do that rather than just using keyframes with animations, though I imagine that it may have been that animations were firing before the transition between animals finished, which would have caused a little bit of weirdness.
FYI for ad blockers: I had to disable uBlock to get this to work. I was quite confused at first because I couldn't figure out what all the fuss was for a spinning circle!
That's a decent use of audio too. Even though it automatically plays it isn't offensive or jarring. Also it goes very quiet if you switch away to another tab.
Not sure how it was accomplished, but is another very nice touch to an impressive display.
25 comments
[ 7.8 ms ] story [ 133 ms ] threadEdit: the presentation itself is impressive, even with unexpected content
Edit
Ha, I found it. Thanks Internet Archive.
http://web.archive.org/web/20061230155412/http://www.billybu...?
1. https://twitter.com/wengerstoybus
We learned how to create animations, how to render 3D models, how to do videos editing, how to do web front-end (advanced css + js), how to do backend web programming and how to create native apps.
It's a lot easier to be good at css when you actually learn it from teachers.
If you can have a designer draw up the basic design, then you can one-by-one take the shards & put them into place with CSS. From there you can set up some animations on specific shards to make it seem like everything's moving together. From there, you basically have one animal. It'd be time-consuming, but would work.
The css selector for a particular animal's shards start with a `.<animal>` class selector, so that you change the animal class in a parent and all the shards move into place.
It looks like they're still using some javascript to set "states", which seem to trigger animations. I'm honestly not sure why they decided to do that rather than just using keyframes with animations, though I imagine that it may have been that animations were firing before the transition between animals finished, which would have caused a little bit of weirdness.
Not sure how it was accomplished, but is another very nice touch to an impressive display.
Would love to hear the story behind its development. That kinda CSS would be pretty tedious to write.