Anna Walant

What's That Noise?

a web experience to teach children about nocturnal animals

Technical tools

  • Sublime Text
  • JavaScript
  • JQuery
  • HTML
  • CSS

Concepts

  • Divs
  • Using the web as a medium

Course

Web Design at Rhode Island School of Design Summer Institute for Graphic Design Studies, with Conrad Fulbrook

My role

Designer, artist, developer

This web experience is related to my interactive book "What's Really There?" 

Through this site, children can learn about the various animals that might live in the wilderness around them. While in it, they hear the noises that the animals make at night and go on a search to find who (or what) belongs to the scariest noise.


Right: A look into my process of planning what I was going to build before I began coding anything. 

By making the environment respond to their searching, both by vertical scrolling and using their cursor (disguised as a tool, such as a flashlight, for lighting the way), the setting comes to life on their screen.

Left: The initial ink drawings that lead to the various layers that make up the environment.

Building the Code

For this project, I used HTML5, CSS3, JQuery, and a few lines of Php. I generally used the idea of using div wraps to fade in and out as they were triggered. Each wrap holds a different environment. For the big environment wrap, I used many images from Photoshop divided into many pieces so that they could react smoothly to the user.

Click above to experience it for yourself! 

Make sure that your volume is on and that you're using a computer.

Using Format