When using the web we’re all used to the classic scrolling experience, where we scroll a long page until we reach the end or get bored. What if instead we scrolled screen-by-screen like some of the best native reader apps?
I worked on a proof of concept JavaScript card swiping UX that offers a similar level of performance as a native app. Each card can be swiped both up and down, and will respond with precision to dragging and quick swipes. This is using many of the same techniques as the pull down to refresh UX, and again uses hammer.js for the drag events.
Browser native scrolling has been disabled, so you are only swiping between a single full width and height card each time. Since it’s a proof of concept it’s only limited to three cards that you can loop through infinitely. In a real world application of this it could be extended to add true infinite scrolling through cards, handling memory usage by adding and removing card elements from the DOM when off screen.
This UX would lend itself well to a news reader interface (a la Flipboard), or in a scenario where you have a few screens of related content. I think combining this UX with the pull down to refresh UX, you’ll have the base for an interesting web reader that could perform similarly to a native app reader. I intend to experiment and iterate on these techniques further, and see how well they can interact together.