Web Design - Final Story Telling Website

19/9/17
Vivien Christian Cahyadi [0331241]
Web Design

---

Instruction

Design and code a story telling website based on the content 'What to do in a fire'. The target market are children aged 6-12. The website should feature interactivity.

---

Work Process

My idea is to make a gamification interactive website. 

Initial Moodboard:

Second Moodboard:

sketches and wireframe :

---

Assets

Progression of character :

Characters :

Animations :

Backgrounds :

---

Coding

Horizontal scrolling
To achieve this, I followed an example from codepen (https://codepen.io/lemmin/pen/xRyXMZ) where the containers are rotated so it would scroll horizontally.

#container {
  overflow-y:scroll;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}

#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  font-size:0;
}

Then, I just added my background as an image so that I would get the width and put my character in a div with fixed position

.character {
width: 150px;
height: 250px;
position: absolute;
bottom: 13.5%;
left: 300px;
background: url(../images/spritesheet2.png);
z-index: 1000;
background-size: cover;
}

Clickable and Hoverable elements

Here, I use position absolute and a little javascript.

For example, for the stairs, I imported an asset of just the stairs - without the glow, and one with the glow. Then, I position the stair so that it is inline with my background image.

.stair {

position: absolute;

    height: 100%;

    transform: translateX(2695.5%);

    top: 0;

}

Afterwards, 

I used onMouseOver and onMouseOut to achieve the hover effect so that when I hover over the stair it would glow and my cursor would change to an arrow.

html :

 <a href="page2.html" id="stair"><img class="stair" id="image" src="images/stair-normal.gif" onMouseOver="newImage()" on onMouseOut="oldImage()"/></a>

javascript :

function newImage() {

document.getElementById("image").src="images/stair-glow.gif";

document.getElementById("stair").style.cursor = "url(images/cursor.png), auto";

}

function oldImage() {

document.getElementById("image").src="images/stair-normal.gif";

}

Responsiveness

However, because of my lack of skills and knowledge, I couldn't make them responsive and ended up using media queries to manually position the texts. 

---

Final Submission

https://drive.google.com/open?id=1jjtEmRUY8XJBwf4HKjSnTifb3KeLZGS2