The design behind the On Yer Bike infographic

As the nation rides high from last summer’s Olympic cycling conquests and the Tour de France kicks into high gear, a new creative infographic published by Express Solicitors is aiming not only to encourage people to hit the road on two wheels instead of four, but to highlight the rewards and point out potential risks too.

As well as stats compiled on journey times, traffic jams and calorie-busting ride times, there are useful safety tips for riders placed at the end of the freewheeling animation, which can be scrolled along using the arrow keys on your keyboard.

As the animation opens we see a bike riding alongside a car, jostling for position on the road. As you ride right, the vehicles race along to the next stopping point; from level crossings to lamp-posts. The bike and car take it in turns to inch ahead between every info point, before the daytime turns to sunset and both car and bike zoom off to the right of the screen and the safety tips come up to advise a safer ride for cyclists.

Although simplistic enough in its details, it’s the little things like the parallax scrolling more commonly seen in 1990s video gaming, where different levels of background and perspective make objects move at different rates across the screen depending on their proximity to the ‘camera’, which make for impressive and informational viewing. Although the prospect of ‘cars vs bikes’ isn’t something we’re salivating at the prospect of exploring these days, this animated guide is a fun way to turn what can be a rather ordinary subject into something to show your friends using the share buttons at the bottom.

The effects were achieved using a mix of HTML5, CSS3 and Javascript, as well as some liberal use of the Skrollr animation library to provide the parallax scrolling effects with manual illustrations, followed by some more use of CSS3 animations to provide a crowning flourish.

1 2

Cyclists vs. Motorists: The Wheel Truth - Express Solicitors

These articles are formulated deep within the Creativeoverflow compound. Picked by hand and posted by the team over at HQ. They usually comprise of new releases, news, opinions, questions, giveaways, freebies and more.