« project overview

Wanna crush my trash? – The interactive trash compactor

In the class Web Basics I learned the content of a website shall adapt to the dimensions of the browser window. Wanna crash my trash? takes that literally. I associated the physical process of crushing to the browser interaction. When minimizing the browser window, the content gets crushed. You can see this as a kind of garbage compactor, that is crashing your daily trash.

There are three items to choose from: a Coka Cola can, a tea package and a milk carton. All of them can be crushed individually. Notice that all of them are in the same proportion. So you can actually compare how the coke can looks like when it's exactly the length of the tea package.

Realistic hovering

On the start page, where you can choose the item to crush, there is another effect that aims realism. When hovering over an item it gets highlighted by coming into the foreground. This is done again with photography instead of using some web techniques that would just enlarge the picture. The result is that the shadows of an item adapt even when a neighbor item is selected.

Screenshots showing the functionality

Screenshot collage showing all the stages of the crushed coke can.

Comparing all the three items. They are all in the same proportion and are shown in nearly the same browser size.

The making-of

The image shows the scenario of taking the photographs of the Coka Cola can. It was very challenging to do all the pictures in an congruent manner with the same proportion. I had to crush every item just a bit and fix it properly before every new picture. After all I just saw when photoshoping the pictures and putting some html-code around them that my idea was actually working.

Video demonstration

Screen cast that shows the functionality

This project was part of the class Web Basics by Tina Deiml-Seibt

FH Potsdam, February 2012

Impressum // © 2014 - Martin von Lupin