TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Makisu - CSS 3D dropdown concept

187 pointsby culshawover 12 years ago

27 comments

mistercowover 12 years ago
Wow, this comments thread is like a poster child for the unconstructive snark trend of HN.<p>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).<p>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.<p>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.
评论 #4689985 未加载
评论 #4693240 未加载
评论 #4685889 未加载
untogover 12 years ago
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.
评论 #4684276 未加载
rajatover 12 years ago
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.<p>In any case, a neat concept. Works great on Safari.
jamesrcoleover 12 years ago
Cool. After the menus fluttered down, they felt just a bit too static as rigid rectangles just sitting there.<p>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).<p>Think of them as like curtains.<p>Or perhaps it could be like there is a constant slight breeze, making them move like a curtain in a gentle breeze.<p>Anyway, just some thoughts.
mmanfrinover 12 years ago
Observations: this is really neat and HN commenters are jerks in this thread.
pcwaltonover 12 years ago
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: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=804324" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=804324</a>
devilshaircutover 12 years ago
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.<p>EDIT: Grammar.
btiplingover 12 years ago
It looks cool, but I think the animation should be faster for the demo. Making users wait for animation is bad UX.
评论 #4685673 未加载
hnriotover 12 years ago
FF 16/Linux is very slow, but works and looks great on the iPad with its hw accelerated CSS.<p>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?
chubbardover 12 years ago
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 (&#60;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.
sprobertsonover 12 years ago
Neat, reminds me of this more general purpose folding library: <a href="http://oridomi.com/" rel="nofollow">http://oridomi.com/</a>
mcgainover 12 years ago
Agreed, cool but ultimately shouldn't be used.
评论 #4683851 未加载
评论 #4683883 未加载
error54over 12 years ago
Works in Firefox 16.0.1 but is really slow. Doesn't really do a whole lot in Chrome 24.0.1297.0.
JacksonGarietyover 12 years ago
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!
评论 #4685882 未加载
arunodaover 12 years ago
Wow superb. This is very attractive for a website and would love to use.<p>But this might not be usable for a Web App, but there may be some situations.
sausagefeetover 12 years ago
I'm reminded of how much I hate DVD menus.
KaoruAoiShihoover 12 years ago
This looks fantastic, but it seems really hard to learn. Need some tools, or a CSS physics engine.
mcmireover 12 years ago
I like the gravity effect. Next: make it so I can drag around the menus.
silveiraover 12 years ago
Really cool. Why so much of the CSS is inline?
评论 #4684450 未加载
locengover 12 years ago
I love it so much! Great job.
tomeldersover 12 years ago
I wish I'd thought of this.
BaconJuiceover 12 years ago
Thanks for sharing.
prisonguardover 12 years ago
you had me at unfolding.
mcormierover 12 years ago
Spoiler: It's not really amazing.
评论 #4692183 未加载
digisignover 12 years ago
Hmm, turns my computer into a vacuum cleaner.
w1ntermuteover 12 years ago
Why is everyone naming software after random Japanese stuff? ("makisu", or 「巻き簾」 in Japanese, are mats used for food preparation, primarily sushi).
评论 #4684687 未加载
评论 #4684637 未加载
评论 #4684655 未加载
评论 #4686100 未加载
duiker101over 12 years ago
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.