We love this website, which lets students peek inside an animated ear. So we talked to designer Bryan James to find out how it was put together.
The site aims to educate students about the workings of the ear
Ever wanted to journey inside someone's ear? Us neither, but this interactive educational website's great use of CSS and JavaScript makes it a weirdly engaging experience.
The Interactive Ear was created by Leeds-based agency Epiphany Solutions for its client Amplifon, which specialises in hearing aids, tests and solutions for the hard of hearing, and is targeted at both primary and secondary school level education.
Clicking on the + symbol brings up a magnifying glass device entitled 'The Journey'
The website showcases the three major parts of the ear's complex systems, encapsulated within a smoothly transitioning interface which enables the user to find out where sound goes, what happens and how it travels to the brain.
Clicking on the pulsating + symbol brings up a magnifying glass-style device (entitled 'The Journey') that enables you to have a sneaky peek inside. We love the naturalistic feel to the animation, so we asked designer Bryan James to tell us more about how it was created.
Take a peek inside and see what's going on
"We use JavaScript to place classes on an HTML element upon a particular action such as hover, which then applies a different style using CSS animations," says James.
"In older browsers without the support, you still get a swift experience which works, but we get the absolute best for the people who have modern browsers. With the power of modern technology, we were able to make the ear itself 'feel' more real with a rollover effect which draws separate 'pieces' in to where the user is browsing.
The effect is achieved using CSS3, JavaScript... and an animated GIF
"We knew how we'd create the magnifying glass area from a previous project which also involved masking content inside a circle. The issue we had was that if you have numerous elements inside a CSS border-radius circle, the elements within still show as though they are contained within a square, so the image absolutely had to be what we used – an animated GIF.
"Applying an 'X-ray' visual to it allowed us to get away with the normal GIF issues of strange pixelation on none-straight edged or photographic images. The GIF is actually of the whole ear, so is large - using JavaScript, when a user moves 100 pixels right, the image then moves 100 pixels left (and similarly vertically) within the circle, which gives the effect of an X-ray."
