iwm.org.uk/history/hmsb80 / Developed at Staak
Tools & Skills:
Vue.js, Web Audio & Video, GSAP
About the project:
Staak were approached to develop an interactive website to complement and accompany the HMS Belfast 80th anniversary celebrations.
The website was built to consider a wide range of users, from school children to families and military enthusiasts through to those who remember The Belfast as a serving military vessel.
The website is built around a central ‘timeline’ which branches off to specific events the Belfast was involved in.
Bringing to life the wartime contributions of The Belfast whilst contextualising these stories against the wider backdrop of WW2 was a challenge. We employed a number of techniques across the site including a bespoke audio soundtrack, embedded video backgrounds and archive cinematography to create an emotive and immersive experience.
To add a further level of gravitas, we leveraged exclusive footage from the servicemen and women telling their stories and sharing their memories and integrated these throughout the site.
Each timeline milestone was developed using modular components to quickly and easily make page templates for each of the Belfast’s stories.
The timeline display uses a carousel with custom CSS animations to set the tone for the overall story of The Belfast and engage users to click through and learn more about its past.
HMS Belfast 80th Celebration.
The main landing page of the HMS Belfast website showed the main events in the Belfast's history, in the form of a carousel. Background video, audio and carousel animations set the atmosphere and encouraged user's to click through to learn more.