Design Decisions and Citing Sources

The pairing I’ve chosen for my project is “stretched” and “information design” and the theme of my website is to showcase high-rise fire education which is sourced from Fire Safety Victoria. To achieve the goal, my design focuses on vertical-direction stretched animation of both text and picture contents while the visitor is scrolling through the page. In addition, I also include parallax scrollings and sliding out description overlays to match the overall style.

Part One:Heading Section(Html+CSS+JavaScript)
Because the heading part will make the first impression on visitors, I organized both textual and visual elements to create an urgent feeling due to the warning role of this website.
For the visual part, video of embers' atmosphere is embedded as background, it works together with horizontal scrolling smoke pictures to simulate a fire circumstance. However, the main visual body—images of buildings scroll downwards when hovering indicate visitors to explore this page by moving up and down.
For the textual part, the two lines of headline text also glide horizontally, in line with visitors' horizontal reading habits and giving them a hint as to the extent of the next reading area, making for a silky smooth interactive experience. The glowing text loading animation appeals to similarity of alert light on fire trucks, related to visitors’custom knowledge.

Part Two:Expand and OverScroll Animation while Scrolling(Html+CSS+JavaScript)
This function consists of two parts—using intersection observer to run a conditional check to find out if that entry is intersecting the viewport or not, and an expanding animation when the entry enters. Therefore visitors can concentrate on a specific present information module and do not worry about interference from other information. Cubic-bezier is used to make sections smooth and look more real.

Part Three:Show Text when Hover(Html+CSS)
This was the most challenging part for me during the whole project, because it required processing dense content—visitors are supposed to see details of the pictures and the six images are a coherent whole, so they must take a big area of the viewport; Nevertheless, the text explanation part is also necessary. Hence, overlay is considered to apply. People intend to move their cursor to the content they focus on so I set the height of the overlay as 100 percent while hovering the image but zero percent as the cursor leaves so a simple upwards animation is created. By setting parent div container’s position as “relative” and overlay’s position as “absolute” to make sure that each description is placed at the same area as its corresponding image.

Citing Soources: