Link:
http://imanas.shanghai.nyu.edu/~yy2552/audio/
Description:
Basically, we want to present a boat trip along the river in Italy and show different scenes by scrolling the page horizontally. You may feel the boat is going slowly when the images on two sides coming to sight. There is a series of audios constantly showing up and fading away. I did most of the visual part and coding and Tenielle drew the comic person, collected and edited all the audios needed.
Process:
The main idea is to play the sound when a certain scroll position hits the border of some image. So I need to record the scroll position first. And when the position comes to a certain range some audio will be played and some will be stopped or faded. I put two buttons to create a little interaction like changing the direction of the boat. I tried to change the opacity of the images with the buttons so that the right or left button should either show the left side when you press the left button or the right side when you press the right button. But somehow it didn’t work.
I came across some challenges when coding and learned a lot. For example, we need to set the property “flex: 0 0 auto;” or give the width a large number for the flex-box so that the boxes won’t be limited to the window. That’s also the reason why we could scroll the page horizontally. Before we set the z-index, we should define the position first. Also, it’s suggested that we’d better give the div the class name.
Post-mortem:
It almost reached our expectation. Because of the time limit, we didn’t focus too much on visual art. Sometimes we may have to pause and do something again due to the lack of communication. It would be better if we make clear what we’re going to do first and begin our work then.
PS: Big thanks to Moon, Cindy, and my partner Tenielle :)))