JavaScript tricks make educational site feel more real

The site aims to educate students about the workings of the ear

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 (opens in new tab) makes it a weirdly engaging experience.

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.

Clicking on the + symbol brings up a magnifying glass device entitled 'The Journey'

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

Take a peek inside and see what's going on

"We use JavaScript (opens in new tab) to place classes on an HTML element upon a particular action such as hover, which then applies a different style using CSS animations (opens in new tab)," 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

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 (opens in new tab).

"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."

Liked this? Read these!

Have you seen a great educational website? Let us know about it in the comments below!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.