Link: MapleStory Survival Kit

This is the final project from the first class of web development from our school. I joined this class as an elective class so I could have a peek of how web development works. A list below is few highlights I would like to show from this project.

  1. Parallax Effect
  2. Use of Sound
  3. Gashapon

👁️ Parallax Effect

Most parallax effect I have seen aren’t quite satisfied to me. Generally they will have a image at the back of other components then have it semi-stationary to sit still at the place. In this project I would like to have a peek of how CSS can do on 2016. Fortunately, after being learning animation system from CSS I am for sure that the parallax effect I was to imagine are possible to accomplish by just the CSS without using JavaScript. You can use the small panel on the top left corner to navigate through the four pages from this website.

🔊 Use of Sound

I did not have any experiences with using JavaScript to play sound in the web browser. I simply searched on google and see if there is a method to play sound using JavaScript. Luckly, I found a JavaScript library, ion.sound which is very simple to use and they have great demo and great examples on their website.

🎟️ Gashapon

If you had visited this website, then you will know there are three gashapons on the mostleft page. Once you hover either of these gashapons, gashapon will start dropping items. This is a simple animation using pure JavaScript renders in 30 FPS.