The Interactive Ear (opens in new tab) 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.
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.
"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.
"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 (opens in new tab).
Liked this? Read these!
- Brilliant Wordpress tutorial (opens in new tab) selection
- Our favourite web fonts - and they don't cost a penny
- Discover what's next for Augmented Reality
Have you seen a great educational website? Let us know about it in the comments below!