autoParallax: An easy parallax navigation for Joomla
Parallax is an attempt to bring some depth to your pages, "pretending" they are laid out in a 3D-world.
Update: we've launched a private beta, contact us to join.
Below we'll discuss the widgets and functionality which fit into the "parallax" description.
What is parallax?
Parallax is all about perception. In a 3D world, items appear to move at a speed that's proportional to their distances from the (moving) observer. So if I look at the moon from the window of my car, the tree on the hill will appear to move quickly across the moon.
In web design parallax we mimic this difference in speed in order to give the illusion that the layers of our website are at a different distance (thus introducing the "z" coordinate in a 2D world).
How can we use this?
Parallax animation/module
By far the most used artifact, consists of putting together several layers of images and moving them at different speeds as the mouse moves. Very easy to achieve, doesn't add so much to presentation quality. The parallax animation is determined by the mouse cursor's position.
Parallax backgrounds
This is what is usually achieved with the jquery.parallax plugin: moving the background at a higher speed during scrolling gives a very nice visual effect. Little configuration is required, so the effect is really easy to setup and nice looking. The parallax animation is determined by the scroll position.
Parallax scrolling
This is used on long pages, very often the whole site consists of a single page. The parallax animation is determined by the scroll position, and several layers are animated to contribute a great looking user experience.
This approach requires two functionalities:
- keeping track of the scroll position from a menu which highlights the current view and allows to move to another quickly
- animate several super-imposed layers to achieve a true parallax effect
Where are we?
While "big name" design gurus struggle to create yet another totally unique interface, smaller sites are following the same approach with a super-limited budget.
This doesn't allow for the difficult mathematics to keep track of items positions, the high quality graphics, and the necessary coding and optimizations which come with this approach.
Since we didn't want to perform all those calculations ever again after we built our pilot, we decided to whip together all the logic behind it in a jquery plugin, which is an integral part of Joomla autoParallax.
Some architectural choices
We had some requirements which guided the architecture of our plugin:
- Limit movement to visible parts of the page to max performance
- Perform all calculations at start-up to minimize overhead
- Provide some high-level animation names (fast, slow, top-down etc.)
- Allow fine-tuning with pixel-precision of any item in the page
On page load, all the arithmetics and measurement is performed, and an array is filled with all the objects taking part in the animation. All values can be automatically calculated, and all support manual override and have extra hooks for further extending the behaviour.
The content in each "block" can be either a module (with special support for category and other list-modules), an article, or custom pasted text / markup the user can insert directly in the parallax editor.
When you only need One Page Navigation
In this example we used the power of Autoparallax to deliver a one-page that's easy to write, translatable, but has no parallax effects at all.
While this could easily be achieved with many modules stacked, or a single huge article, being able to create content in stacked boxes from within a single component, adding content from modules only when necessary, proved the easiest choice. Leave the editors with the task of writing, designers design, and Autoparallax handles the navigation and menu automatically. The only task required on the content editors is to flag whether a "brick" should have a corrensponding menu item or not.
