HTML5 motion graphics

Engaging HTML5 motion graphics that helped European Diesel Card make their corporate website design instantly more exciting and engaging, and stand out in the busy digital space.

Challenge

As part of designing the European Diesel Card website, which we needed to make stand out from the crowd in the crowded online space, our brief was to ensure that the website would deliver key business messages in a clear and memorable way, triggering the desired response from the target audience.

Solution

Home pages and landing pages have long been host to the content slider or carousel features as these offer ways of displaying multiple messages in the same space, near the top of the page, in a creative and engaging way. For the European Diesel Card website, our digital team gave particular attention to how web content was organised in the mobile responsive header sliders.

Applying animation effects to strong typography and bespoke illustration, the key product messages and call to actions are brought to life with the use of HTML5 motion graphics, improving the customer experience and maximising response from the start. The animated slider uses a combination of animated gifs, parallax animation – where layered elements are moved at different speeds to give website visitors the impression of distance – and text that is animated sequentially. As a result of this approach, the HTML5 motion graphics ensure the company’s corporate website is instantly more exciting and engaging.

As part of the overall project, we also managed the translation of the content into 8 languages.