Paperfold CSS(developer.mozilla.org)
developer.mozilla.org
Paperfold CSS
https://developer.mozilla.org/en-US/demos/detail/paperfold-css
19 comments
Hmm. 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?
why doesn't this work in the latest Opera?
Web 3.0? Seriously, CSS like this makes me think web interface development is entering a new era.
Amazing effect! Here's hoping it's still cool to me after I see it after every blog's "more posts" link.
If 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.I'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.
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.
If 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/UI...
""" 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/UI...
Woah, 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-effe... - apologies for the self-promotion.
Here is my unpublished example from about 18 months ago:
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.
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.
Great 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.
Seriously, nice job.
While the Mozilla one worked, your example did not work on FF 11.
I 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.
Is this real? This looks kinda cool, but I don't trust anything on this day of all days!
I'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
For reference, this is very similar to the animation OS X Mail.app uses to expand hidden quoted text.
This was also the inspiration. Well spotted.
I 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!
Sad to say you may be in violation of an Apple patent, then.
Prior art from Palm, 2009: http://www.youtube.com/watch?v=jTqa-0uea1w
Got this weirdness after a while without touching any settings: http://i.imgur.com/ebmc0.png
Chrome 18 osx
Chrome 18 osx
It's a depth-clipping bug in chrome
This is just awesome! Great work!
Text aliasing is horrible on Chrome 18/Win8.
Chrome'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.
It'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.
"This type of coding would be much easier to do in JavaScript."
You could do this in JavaScript by manipulating the DOM directly - that's what libraries such as jQuery offer, but having easing functions for transitions belongs as part of the styling[1], unless you're saying that CSS should only be for static layouts?
[1] http://www.w3.org/TR/css3-transitions/#transition-timing-fun...
You could do this in JavaScript by manipulating the DOM directly - that's what libraries such as jQuery offer, but having easing functions for transitions belongs as part of the styling[1], unless you're saying that CSS should only be for static layouts?
[1] http://www.w3.org/TR/css3-transitions/#transition-timing-fun...
True, 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.
can we call that pure and functional?
I don't know much about CSS. What happens here?
https://developer.mozilla.org/media/uploads/demos/m/r/mrflix...
https://developer.mozilla.org/media/uploads/demos/m/r/mrflix...
Half 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.
In production it would be way less complex.
[deleted]
Just like the feature in OSX Mail. It's nice to see how web UI is keeping par with native development.
This looks a lot like the Clear app's animation for creating a new task.
The 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.)
(Mail hides quoted text at the end of a message by default, and revealing the text will show this "folded paper" animation.)
http://i41.tinypic.com/wv48rr.png