codrops... This site is very legit. Thanks for sharing.
edit
Funnily enough, a question about how "legit" this site actually is... Stumbled across one of their demos that was pretty sweet IMO, "Multi-level Photo Map"
http://tympanus.net/Development/MultiLevelPhotoMap/
So I Googled "Multi-level Photo Map" and came across a handful of other demos set up the same way, with the same header navigation bars all:
In fact, that last one daysnapper has pretty much all the exact same tutorials and demos set up as codrops.
What's going on here? Is this just some gray layer of blogs that are pooling open sourced UI elements and reposting them for link bait and page view inflation?
Thanks for the links. We will take a look. Be sure that we don't copy content of anybody, ever. These are obviously copies of our work which is not necessarily something against our license. Thanks a lot, Pedro
controversial as in it's an undesirable, irreversible interaction that really turns people off and critics of dcurtis's "work" were more than happy to speak out about it.
That's a good question, I think the reason is that the platform built around viewing web pages is way too flexible and versatile to be dismissed as merely a structured text markup document viewer.
Basically document markup processors are text-driven programs and all programmers know it's just too easy to hook up extra functionality if the behaviour of your program is already defined by a textual input file. Thus <blink>, then JavaScript, and a bit later, WebGL.
The text, links, and scrollbars approach is excellent for presenting information (i.e. text documents with images). Happily, the current capabilities of the platform don't preclude this sort of presentation. Certainly some fraction of genuinely informational sites these days are more like programs than documents but I just think in addition to all old and new text+link documents there's a huge array of mostly non-informational entertainment sites that didn't exist in "web 1.0".
I could live with the old-style hypermedia web, too, but sometimes I just wonder if the printing presses ever thought "Damn, these machines were built to print books and distribute information and now these newcomer publishers are using them to print stupid TV magazines with little if any content."
-1 However I think that the "flip" gesture on non-touch devices is wasted and impractical. Dragging or flipping with a mouse doesn't feel right. Could a flip button be kept for pc users?
This may be great on a touch device, but usability suffers massively with a mouse or track pad. The effect looks nice enough, but I am rarely in favor of sacrificing usability for style.
This is one of the better page turning effects I've seen, but I'm not sold on any of them.
On iOS one soon learns that many of the gestures can be performed as tiny taps and flicks, rather than as more exaggerated gestures, a good example being scrolling with a flick, or sliding the on/off toggles with a simple tap. However, the page turning effect here is at its slowest when a simple flick is used to turn the page, and at its fastest when the finger is dragged all the way across the screen to turn a page - this is backwards, and causes me to get annoyed with the gesture very, very quickly. I would expect fatigue to become a problem for serious readers too.
I like that a lot. One thing I would say -- on a browser, it's not immediately clear that you can click on an article to expand it. I don't have an iPad, I've never used Flipboard, so I didn't know what to expect. I figured it out pretty fast, but it might be nice to somehow highlight the article that you're about to open on mouse hover (faint blurred light-yellow border, perhaps). Granted, this probably works a lot better on an iPad. But even in a browser it actually looks pretty good.
I naturally went to click the Flip button looking thing, and nothing happens. I only tried a swipe as it were after reading comments here. I would say, for a non touch screen user, its not intuitive. Works nice once I realised how to use it, but if I had just landed on a site with this setup, I might have clicked a few times, failed and moved on to another site.
Perhaps all thats needed is for |Flip to say Drag, with perhaps an arrow.
Looks great and works great on the latest iPad. Nice work and I appreciate the attention to detail - shadows, transitions, etc (even if it's cribbed from another application).
To help with usability on a regular PC (as decultured mentioned) I'd recommend a zone for auto-flipping without the drag on a regular mouse-based browser.
The page flip is perfect on iPhone but the article scroll felt awkward because the text does not have accelerative scrolling. In other words web you swipe down down quickly it doesn't keep sliding when you pull your finger off, it just stops.
How would one go about wrapping this up to make it an Android and iOS "App"? Would something like this offer a low barrier of entry for magazine sites looking to create companion apps for their content?
yeah, exactly. as a dev i'm just solidly impressed with the experiment. it seems like a fun project someone decided to tackle and did so quite well. what i think most of us want now is for the author to take it to the next level and make it more appropriate for our non-touch devices, but that's not really his responsibility for an experiment.
Make sure you have clicked on a story before you try to scroll, that got me for quite a while too. There was nothing to tell me to click on stories to read them. I only figured it out because I tried to click on an image and got a story instead...
Try scrolling a web page with page/up/down. Or use the space bar (and shift + space.) Flipping is just paging with an animated transition (the transition I personally don't care for.)
And if you like this one, don't miss the how-to: http://tympanus.net/codrops/2012/05/07/experimental-page-lay...