Marcels

Interactive campaign for South Africa's favourite frozen yoghurt brand.

Type
Website Campaign Development
Sectors
Food, Beverage
Technologies
Javascript, HTML5, CSS3, JQuery

Marcel's 25 year animated interactive website campaign

Elemental Web Solutions was approached by a creative Digital Agency in Cape Town to assist them with the development of a campaign for Marcel's 25 year birthday.

The agency provided all the creative design elements and creative direction as to how the animation should work from a user's point of view. The campaign was to celebrate Marcel's 25 years since launch where participants could interact and win their share of R25 000 as well as other great prizes. Users were to register or login with their Facebook profile.

The system would then pull various events that happened throughout your Facebook timeline, also users could enter their own special moments over the years. Once entered they would be able to view a highly interactive and animated series of moments over the last 25 years, as the moments consisting of the user's moments and other well-known moments. For example South Africa winning the Rugby World Cup and Nelson Mandela being released from prison.

Building the fun stuff

We set out determining the best approach to ensure that the animations would run smoothly and consistently in all major web browsers on various devices. We proceeded with the slicing of all the designs, including the extraction of various visual elements that needed to be animated.

For the animations of the various elements as the user scrolled through the website, we achieved the necessary movements, effects and animations with CSS transitions and javascript. Finally, we integrated with the Facebook API to get all the user's profile data necessary for this website such as personal details and date related events. These Facebook permissions were requested by the website and then verified by the user through a Facebook pop up window.

Another Successful project

The final product was exceptional, due to the combination of the highly creative designs, fun interactive elements and strong use of web based animation. This resulted in a rather different and somewhat interesting experience for the user due to the animation compared to normal websites and campaigns, making this standout campaign.

The integration with Facebook meant that a user's personal details and events were integrated into the campaign giving them a feeling of accomplishment and involvement with the history of Marcel's evolution from infancy to being 25 years old.

INTERESTING FACTS

The use of JQuery within the web app, helped speed up the development, as certain fundamental Javascript functions were handled already by this library.

Do you need the services of a solid web development agency?

Companies around the world choose Elemental as their tech partner for the design and development of custom websites, web apps, software, and mobile apps. We work with businesses of all sizes, from agile startups to well-established enterprises, to bring their ideas to life. Let's discuss your vision and explore how we can turn it into reality.

Get in touch

WE LOVE A GOOD CHALLENGE

When custom developing the animation for the movement of the various elements that show, move and hide when the user scrolls, we had certain challenges whereby different web browsers and mobile phone browsers behaved in slightly different ways. To overcome this challenge, we needed to write custom javascript and CSS for these edge cases to ensure that the experience was consistently the same across the different devices and their respective browsers.