I came across two really interesting pages yesterday that seemed so intertwined I needed to write about them together.
The first is a neat jQuery plugin called jParallax for producing parallax effects on a web page. Here’s a quick demo I threw together:
The above demo may not work if you’re not viewing my site online. It requires some JavaScript that isn’t included in the RSS feed. There are some better demonstrations on the plugin site.
The neat thing about this jQuery plugin is that it takes any number of images (I just split a landscape photo I found on the web for this demo) and pretty much automatically turns them into a parallax view that corresponds to your mouse movement.
What isn’t so neat is that many users don’t have a continuous pointing device like a mouse which can interact with this demo. This was the topic of the other article, QuirksBlog: iPhone events.
The main point of this article was to explain how the JavaScript event model (mousedown, mouseup, etc.) works on the iPhone where you use a finger rather than a mouse to move around the page.
The iPhone uses a subtly different event model than traditional browsers. The user uses his fingers for all actions, and although fingers can be seen as a mouse (sort of) and a tap as a click, this comparison is not correct.
The problem is that several gestures, notably moving your finger and double-tapping, are reserved for system functions. Besides, the user can also put his finger somewhere else on the screen without any sort of pointer crossing the intermediate space—something that’s unthinkable in traditional mouse interaction.
The mouse is a continuous pointing device; the finger is discontinuous. That’s a profound difference that I wish I were able to clearly understand and explain.
The article goes on to describe how the event model works in Mobile Safari’s JavaScript and how it differs from a normal web page. Most importantly, you don’t get any mousemove events on the page until the user clicks on something and releases their finger. At this point, you get the normal events for a click, but you don’t see the mouse move through the intervening space.
This basically means that parallax tricks like the one above simply won’t work on the iPhone. There are also other discontinuous pointing devices–like graphics tablets–which won’t be able to use it either.
This is an interesting area of accessibility that I hadn’t really thought much about before.
