7 ms·
Paperfold CSS
- rbarooah 15y agoJust like the feature in OSX Mail. It's nice to see how web UI is keeping par with native development.
- gklitt 15y agoWeb 3.0? Seriously, CSS like this makes me think web interface development is entering a new era.
- monsterix 15y agoVery interesting piece of work. How far is its cross-browser support?
- eliaskg 15y agoWorks in every browser that supports 3d transforms, namely the latest versions of Chrome, Firefox, Safari (+ Mobile)
- mikeflynn 15y agoAmazing effect! Here's hoping it's still cool to me after I see it after every blog's "more posts" link.
- firefoxman1 15y agoIf history is any indication, I would expect it to play out like this: 1. A few awesome sites adopt it first. 2. Eventually everyone catches on. 3. People take it *way* overboard. 4. Users become thoroughly annoyed. 5. Eventually return to sanity.
- sunir 15y agoI'm interested in what happened when I only partially folded the items. What's intriguing about using 3D this way is that, like a zoomable user interface, it can reduce the visual space that lower priority visual items take up but still hint at their semantic meaning. However, I also noticed the supposedly less important information actually looks more interesting than the top-level content (which is flat on the screen), and so it became a distraction and backfired.
- mbostock 15y agoIf you like that idea, you might like the Perspective Wall (CHI '91) by Mackinlay, Robertson and Card. Abstract: """ Tasks that involve large information spaces overwhelm workspaces that do not support efficient use of space and time. For example, case studies indicate that information often contains linear components, which can result in 2D layouts with wide, inefficient aspect rations. This paper describes a technique called Perspective Wall for visualizing linear information by smoothly integrating detailed and contextual views. It uses hardware support for 3D interactive animation to fold wide 2D layouts into intuitive 3D visualizations that have a center panel for detail and two perspective panels for context. The resulting visualization supports efficient use of space and time. """ PDF: http://www2.parc.com/istl/projects/uir/publications/items/UIR-1991-03-Mackinlay-CHI91-PerspectiveWall.pdf http://www2.parc.com/istl/projects/uir/publications/items/UI...
- reason 15y agoSomething interesting happens if you set all the variables to 0.
- snprbob86 15y agoSpoiler alert: I hacked the slider min values to zero with the inspector. The tab's CPU usage goes off the charts & locks up; infinite loop.
- taitems 15y agoWoah, this is freaky. I just posted a similar experiment to my personal collection minutes apart. There are some fundamental limitations to CSS3 animation at the moment, like not being able to animate gradient backgrounds. You can read about it here: http://taitems.tumblr.com/post/20267547479/3d-accordion-effect-ux-lab-006 http://taitems.tumblr.com/post/20267547479/3d-accordion-effe... - apologies for the self-promotion.
- periferral 15y agoWhile the Mozilla one worked, your example did not work on FF 11.
- zobzu 15y agoLikewise fx13 ah the beauty of the "open" web. I bet it works on Chrome - and nothing else.
- buu700 15y agoI'm on Chrome and it didn't work for me. My prediction: the only person it works for will end up being on IE 6.
- taitems 15y agoI fixed up Firefox support. Strangely, all the 3D transform examples have always mentioned something like "perspective: 1000". It's always been some imaginary unit. Firefox requires "1000px" for it to work.
- deepkut 15y agoGreat minds think alike? If you're looking for feedback, how might you make the actual background (the dark blue) not show when the animation runs? And maybe something interesting faux content like a feed of some sort? Those two things would make this comparable to the Moz demo in every way. Seriously, nice job.
- JoelSutherland 15y agoHere is my unpublished example from about 18 months ago: http://dl.dropbox.com/u/124944/unfold/index.html http://dl.dropbox.com/u/124944/unfold/index.html It's unpublished because it doesn't work very well, (webkit only I think) but it does 'work' on arbitrary content and will create a seam even in the middle of a line of text.
- dustineichler 15y agoIs this real? This looks kinda cool, but I don't trust anything on this day of all days!
- lopatin 15y agoIsn't this a 3d object and not straight HTML? Therefore I would think it can't be used on basically any website.
- aaroneous 15y agoJust CSS3 3D transforms on plain 'ole DOM objects connected by CSS3 animations.
- calydon 15y agoI'm not sure what I did but while messing with the settings at one point the top slider was bouncing back and forth like a pendulum. Chrome 17
- comex 15y agoFor reference, this is very similar to the animation OS X Mail.app uses to expand hidden quoted text.
- mindhunter 15y agoThis was also the inspiration. Well spotted.
- imaginator 15y agoI remember seeing mindhunter presenting this the first time. The effect was cool. But seeing him jump up and down on stage because he managed to get it working. Way cooler!
- ams6110 15y agoSad to say you may be in violation of an Apple patent, then.
- mortenjorck 15y agoPrior art from Palm, 2009: http://www.youtube.com/watch?v=jTqa-0uea1w http://www.youtube.com/watch?v=jTqa-0uea1w
- pedrolll 15y agoGot this weirdness after a while without touching any settings: http://i.imgur.com/ebmc0.png http://i.imgur.com/ebmc0.png Chrome 18 osx
- mindhunter 15y agoIt's a depth-clipping bug in chrome
- eliaskg 15y agoThis is just awesome! Great work!
- moonchrome 15y agoText aliasing is horrible on Chrome 18/Win8.
- TazeTSchnitzel 15y agoChrome's text aliasing for CSS transforms is horrendous. It's because they don't use hardware acceleration (something Safari does by default, quite beautifully), meaning they render things in software poorly for greater performance.
- wavephorm 15y agoIt's great, but I wish I didn't have to do this in CSS. When you look at the source code, it doesn't look like styling at all, it looks like programming. As soon as your start calling bezier functions in a static styling language, you know something's not right. This type of coding would be much easier to do in JavaScript.
- TazeTSchnitzel 15y agoTrue, but I like being able to do this declaratively. You don't incrementally change it with code, you define a mathematical function against time for the transformation.
- kzrdude 15y agocan we call that pure and functional?
- deleted 15y ago[deleted]
- ralfd 15y agoI don't know much about CSS. What happens here? https://developer.mozilla.org/media/uploads/demos/m/r/mrflix/ce26be858cecaf2b60021f86401337a3/paperfold-css_1333213378_demo_package/css/paperfold.css https://developer.mozilla.org/media/uploads/demos/m/r/mrflix...
- mindhunter 15y agoHalf of the CSS code is used for the demo interaction (time changing, showing the helper elements and for debugging [grouping all animated elements to change the transition-duration all at one]). In production it would be way less complex.
- Kiro 15y agoI thought being able to do something in pure CSS without using JavaScript was something good.
- 15y ago
- MatthewPhillips 15y agoThis looks a lot like the Clear app's animation for creating a new task.
- pavlov 15y agoThe same animation is used in Apple's Mail 5 which shipped in Mac OS X Lion. (Mail hides quoted text at the end of a message by default, and revealing the text will show this "folded paper" animation.)
- drsim 15y agoHmm. It looks awesome, and I'm all for the physical metaphors approach of Apple, but how does this enhance usability versus say a standard accordion?
- tambourine_man 15y agoGreat stuff. I goes crazy on an iPhone iOS 4.2.1, the post spins in 3d space as you scroll. http://i41.tinypic.com/wv48rr.png http://i41.tinypic.com/wv48rr.png
- tripzilch 15y agowhy doesn't this work in the latest Opera?