Parallax scrolling is no longer the guaranteed attention-grabber it used to be, but there are other ways of using parallax techniques to engage your visitors and enhance your user experience.
Take a look at Mr Fisk's site, designed by BMO, and you'll notice a different sort of parallax going on: its brightly-coloured main image moves in 3D, in response to your mouse movements.
- 5 tips for super-fast CSS
It's an impressive effect that's not too hard to implement; simply follow these steps to give your site an eye-catching sense of depth.
01. Initiate HTML
02. Content elements
The technique will allow any content container using the data-parallax attribute to display the effect. Each first level child element will display with the parallax presentation. This example sets three child layers for the parallax, but you can add more if you want to. You can also add content to these layers such as text or images; PNG or SVG with transparency will work best.
03. Parallax container style
Create a new file called 'styles.css'. The first set of rules in this file sets the default size of the parallax container and its position mode. It's important to use relative positioning so that the child elements can be placed in relation to wherever the container is located. The width and height are set to cover the full screen to allow for maximum interactivity.
04. Parallax children
Each of the first level elements inside the data-parallax container are sized and positioned to appear centrally. Along with parents relative positioning, percentage is used as the measurement unit, allowing the sizing and positioning to be placed in relation to the parallax container. For this example, a transparent red background is used to demonstrate the effect – you can replace this with PNG or SVG image of your choice using @background: url ("your image here").
06. Node search
07. Parallax listeners
The final step is to apply an event listener for any mouse movement occurring over the parallax container. Any such actions trigger a feature to calculate the new positions of the parallax layers based on the mouse position and the data-index attribute defined in step 06 – resulting in each layer updating at different paces. The result of each calculation is applied to the layers via the style attribute.
This article was originally published in issue 272 of creative web design magazine Web Designer. Buy issue 272 here or subscribe to Web Designer here.
- Create liquid effects with WebGL
- 10 ways to avoid cross-browser compatibility issues