The Most Northern Place

By Luigi De Rosa on March 25, 2014

Recently I completed the development work on this beautiful transmedia project by Anrick Bregman, you can see the full project in detail here in our 'Work' section. It was built in HTML5 and I utilised some nice little tricks that might be interesting to you developers out there.

Working with moving image creates its own issues with regards to device support and browser speeds, from the outset we wanted this site to be fast. Most of the hints and tips below focus on optimising video on the page.

Making the blur effect

 

A long time was spent making the blur effect fluid and smooth. The first option was a CSS filter which looked ok but was performance heavy and created a slight lag. The second attempt was with a SVG Filter which just looked terrible! The best result came from making two versions of the same video, this meant all rendering was done beforehand and not reliant on the processor. 

 

We had a standard video with no effect and then one with a 7 px gaussian blur. Overlaying the two layers and changing opacity to the video with the blur, we managed to obtain an effect which was very close to what we planned, saving time and resources. In order to simplify the video processing, I also wrote a script in Bash using ffmpeg.

SPEED TESTING

Css Blur

Overlayed Video Trick

Here you can find a comparison between CSS Blur effect and the overlayed video trick. Note the difference of FPS between the two techniques. For all the geeks out there, here are the scripts I used to automate the dirty job: generate_blur.sh | generate_frames.sh 

Compass Preloader

This was an addition to the site after we started getting more hits. A great idea, using your geo location the loader works out how far way you are from Thule, the village featured in the website.

To make this feature work I used the open source API Telize which gives the longitude and latitude of your IP address.

Once we have this information we apply the values to the haversine formula which will find the distance from the target in this case the village of Thule and its location on the compass.

 

Utilized Technologies

History.js
SASS + Compass
Grunt
Preload.js

 

FFMPEG
Zeroclipboard
Modernizr
jQuery

underscore.js
raphael.js
toe.js
jQuery-FullScreen 

jquery-mousewheel
WebRTC
Telize.com API
Haversine formula