
Makisu - CSS 3D dropdown concept - culshaw
http://soulwire.github.com/Makisu/
======
mistercow
Wow, this comments thread is like a poster child for the unconstructive snark
trend of HN.

Anyway, I think it's a neat concept. It runs correctly for me in FF (slow, but
FF seems to be having problems taking advantage of my hardware in general for
3D stuff).

On Chrome and Midori it's fast, but the swinging effect gets clipped to the
straight edges of the menus, and the text only shows up in the menu headings,
rather than for the menu items themselves.

If I change the 'line-height' property for '.list dd' to 0, I can just make
out the tops of the menu item ext, so I'm guessing that this is a positioning
problem.

~~~
dmotz
Unfortunately Firefox still lags behind WebKit for CSS 3D transforms in
performance and rendering quality (antialiasing). There's a fix for the latter
issue, but it involves an even greater performance hit in my experience.

I wrote another library that relies heavily on 3D transforms to do folding
effects (<http://oridomi.com>) and it's frustrating seeing the same issues you
see in Makisu in Firefox.

Mozilla's been iterating quickly, so hopefully it's just a matter of time.

------
untog
For the detractors, notice that the title says "concept". It's like a concept
car- you're not going to drive one out of the showroom, but themes, hints and
touches will make their way down to the models people drive every day.

~~~
peterjmag
Agreed. I think HN tends to forget another key point: it's just fun! I love
"impractical" little things like this, and it's great to see so many people
playing around with browser technologies.

~~~
lowboy
The problem is that we'll get people using this in a primary role on their
sites/apps because it's novel and people love using novel things. In order to
have that "fun" look, you have to have a pretty long animation duration
(currently ~3 seconds until they stop moving), which is doing users a
disservice by making them wait until they can use the navigation let alone
start reading the contents of the list.

It's a neat demo, I just fear what developers will do with it.

~~~
JacksonGariety
If someone is building a site with no UX experience, is isn;t the fault of
this incredible CSS developer that his site has bad UX. His site would
probably have bad UX with or without this menu.

~~~
lowboy
Fair enough. I would no more blame the manufacturers of spoons for America's
obesity rates than I would this developer for incorrect application of this
demo.

Although, this demo is the equivalent of a spoon manufacturer demonstrating
their spoons by having a picture of someone eating a giant bucket of gravy.
Maybe the manufacturer can't be blamed for obesity, but they could help out by
providing a healthier demonstration of how their product should be used.

------
rajat
While I agree that this effect probably shouldn't be used for a general
webpage, it could be quite effective and appropriate for a game.

In any case, a neat concept. Works great on Safari.

------
jamesrcole
Cool. After the menus fluttered down, they felt just a bit too static as rigid
rectangles just sitting there.

It'd be cool if you could make them flutter a bit by moving the mouse around
or by grabbing and dragging the edges (or some other means).

Think of them as like curtains.

Or perhaps it could be like there is a constant slight breeze, making them
move like a curtain in a gentle breeze.

Anyway, just some thoughts.

------
mmanfrin
Observations: this is really neat and HN commenters are jerks in this thread.

------
pcwalton
For those interested in the cause of the slowdown on Firefox, it's a bug in
the calculation of overflow in 3D transforms that causes the browser to
repaint the background every frame:
<https://bugzilla.mozilla.org/show_bug.cgi?id=804324>

------
devilshaircut
I think it's neat. It says "concept" and "experimental" (on the Github readme)
so I don't think it's being sold as usable navigation. Always a pleasure to
see technology demos like this for CSS.

EDIT: Grammar.

------
btipling
It looks cool, but I think the animation should be faster for the demo. Making
users wait for animation is bad UX.

~~~
CaveTech
But the animation is the demo...

------
hnriot
FF 16/Linux is very slow, but works and looks great on the iPad with its hw
accelerated CSS.

I agree with some others that the animation speed is a little slow to give
that suspension of disbelief, and the menus are a little too static once the
animation has finished, but I have useful suggestions there because they would
stop being very useful if they moved around. Maybe the effect would work best
in the form of a dropdown menu?

------
chubbard
Hey it's very stylistic which means it's of limited use in general, but I
could see it being used in certain situations. I think what makes it
impractical is how tall the menus are in the demo. If the menus were smaller
then the fold out, roll up effects would happen much quicker (<1s) which would
make it less annoying to watch. It takes almost 5 secs to unroll. You can
adjust the speed of each menu item (default 0.8) so lower than to 0.4 and it
might be less cumbersome to use. I think it's a neat effect.

------
sprobertson
Neat, reminds me of this more general purpose folding library:
<http://oridomi.com/>

------
mcgain
Agreed, cool but ultimately shouldn't be used.

~~~
Foomandoonian
Agreed, but a version that fell open almost instantly and swayed just for a
moment would be very cool, and perhaps an improvement on the standard UI. I
wonder what other subtle animations might be helpful?

~~~
recursive
None, if it locks up your computer while animating at a buttery smooth ~2fps.

------
error54
Works in Firefox 16.0.1 but is really slow. Doesn't really do a whole lot in
Chrome 24.0.1297.0.

------
JacksonGariety
This is also a great example of how far behind gecko is from webkit in the
performance game. Look at it on Firefox as opposed to Safari or Chrome!

~~~
TazeTSchnitzel
Sadly, on Ubuntu, Chrome and my ATI card's drivers don't get along, so I'm
forced to use Firefox when doing anything with 3D CSS Transformations or
WebGL.

------
arunoda
Wow superb. This is very attractive for a website and would love to use.

But this might not be usable for a Web App, but there may be some situations.

------
sausagefeet
I'm reminded of how much I hate DVD menus.

------
KaoruAoiShiho
This looks fantastic, but it seems really hard to learn. Need some tools, or a
CSS physics engine.

------
mcmire
I like the gravity effect. Next: make it so I can drag around the menus.

------
silveira
Really cool. Why so much of the CSS is inline?

~~~
tomelders
I think you're looking at the DOM, not the Source. Javascript adds CSS to the
style attribute.

~~~
silveira
Yes, I was looking at the DOM. But why add styles as attributes? There is any
performance improvement? Couldn't be done with just CSS?

~~~
TazeTSchnitzel
Well that is CSS. And of course there's a performance improvement - unless
you're applying a transformation to a hundred or so elements, it's usually
much quicker to directly manipulate element.style than generate some CSS, put
it in a style element, append that to the DOM, and wait for the browser to
parse the CSS.

------
loceng
I love it so much! Great job.

------
tomelders
I wish I'd thought of this.

------
BaconJuice
Thanks for sharing.

------
prisonguard
you had me at unfolding.

------
mcormier
Spoiler: It's not really amazing.

~~~
culshaw
is too

------
digisign
Hmm, turns my computer into a vacuum cleaner.

------
w1ntermute
Why is everyone naming software after random Japanese stuff? ("makisu", or
「巻き簾」 in Japanese, are mats used for food preparation, primarily sushi).

~~~
DanBC
Syllables and K's are strong sounds (Kodak). Most English words in English
have been claimed; there's no domain name available and there likely at least
5 other businesses registered with that word in their name.

Romaji[1] seems like a fun place to plunder exciting sounding words from.

Anime and Manga became mainstream popular X years ago, where X is long enough
for those early fans to become old enough to start naming products.

------
duiker101
It LOOKS nice but it's just an eye-candy. It is not a good thing to implement
into an actual website. I really do not see a purpose for it.

