Eriba ScienceHall | HTML5 scrollpage

We all age. But why one person lives healthily up to 80 and the other has to deal with chronical illnesses is not completely clear. ERIBA researchers are studying which biological processes lead to the dying and malfunctioning of cells, and try to unravel the biology of ageing. With the interactive exhibits in ERIBA Science Hall you can have a look in the world of biology and the science behind ageing.

The project was done as an HTML5 scrollpage. The biggest issue of this project was how to create a rich experience through a full screen scrolling background and make it work on a desktop pc and iPad! The biggest issue was the vast quantity of images needed for the background video. We had to drop the possibility of a background movie (mp4 for instance) because of the following reasons.
– A movie via progressive load (HTML5) needs to load completely before smooth scrolling is possible;
– You can’t jump halfway a movie at page load (needed for internal links to scrollposition);
– To have a sharp image on each point, the video needed to be rendered with full-keyframe.

We ended up with about 1500 images in total, 400 (spritesheets) low-res and 1200 (full version) high-res images. While scrolling it shows a low-res image and loads the high-res when the user stops scrolling. While scrolling all sorts of rich and interactive content will be shown relative to the current background image.

For desktop and all the different browsers this was a complex (and maybe even frustrating) project, let alone making this project work on iPad.
For displaying the content a lot of tricks where involved, but the result is awesome! I’ll invite you to try it (via the link below) on an iPad 2 or later.


Click here to experience Eriba SienceHall