EverWeb Codebox logo

EverWeb Widgetbox 3

Parallax Scrolling On Mobile Devices

The Problem

Parallax and scrolling effects are not suited for use on designs created for viewing on mobile devices for a number of reasons.
The images used for these designs are too large for mobile use.
The amount of processor power is too great for battery driven devices.
The way in which iOS devices deal with scrolling is not suited to these effects. When viewed on a computer, scrolling fires as soon as the visitor starts to scroll. On iOS devices the onscroll event doesn't fire as the user scrolls - it does so at the end when the scrolling has stopped. This is done to help preserve battery power.
The screens of a fixed width device like an iPad are not big enough to appreciate the scrolling effects.
Due the large and ever increasing number of visitors using tablet devices, it's worth creating a solution for this problem for those who feel they really must have these effects.

The Solution.

Create a separate page for tablet users.
The page content width can be reduced to about 780px so that tablet users get the best viewing experience in terms of text size and readability.
Go to the Demo page to see the changes.
The background image was inserted using the Background Image widget.
The same content has been used but without the animation.
When the page is opened by a visitor using a tablet device, they are redirected to the tablet version of the page with some javascript. This script is pasted into the Head Code box in the Page inspector of the equivalent full site page.

Script

<script type="text/javascript">
if (screen.width <= 1081) {
window.location = "ipad.html"; }
</script>


… where ipad is the page file name.
Note that the screen width used is wide enough to redirect visitors who are using their tablet in landscape mode.
As always, avoid the use of hovers on the tablet version and replace text hyperlinks with tabs or buttons.