Simon's 5% Friday Project

In my first 5% Friday since joining Ecce Media I decided it was a great opportunity to undertake a creative project away from my usual client work and get my teeth into something a little different.

Interactive Office Tour

Inspired by the lovely people at Karthart I decided to create our very own take on their interactive office tour. This project was to work as a proof of concept to see if something similar could be incorporated into our new website, however it also had the added bonus of allowing me to flex some of my front end development as well as my much neglected video editing skills.

From Concept to Creation

Camera in hand I shot a quick walkthrough of the office roaming from room to room and making the most of natural daylight that beamed through the office windows. I edited the subsequent video using Adobe Premier and exported the file as an image sequence.

Instead of viewing the office tour as a flat video, I used some jQuery magic to enable the user to control the flow of the video using their mouse wheel. This added the unique ability to navigate forwards and backwards through the office tour at the viewer’s control. It doesn’t stop there, I then tracked exactly which frame the user was viewing at any given moment and triggered a range of custom CSS animations to appear. This enabled me to highlight key portions of the video at just the right time, adding a different dimension to the office tour and giving me the opportunity to communicate extra information, as shown below:

As this snapshot demonstrates, the viewer’s current position within the office tour is numerically tracked as the user scrolls forwards and backwards (1) which ensures the custom animations appear at exactly the right point during the video (2) and in this case, highlights Bella’s love of pigs ears!

Conclusion

Not only was this project a change from my normal workload, but it was genuinely fun and interesting. With some fine tuning here and there, I hope to use this concept on the new Ecce Media website to give users a glimpse of life at The Old Printworks. Keep your eyes peeled and bring on the next 5% Friday.