Web Designer
Test Chamber 00 - Web Animation
Background:
Based off Valve's Portal video game series, this was my first big personal project. I loved the video game series and thought it would be a great first start to test my skills--my goal: to use as little images (JPEG, PNG, GIF, etc) as possible, and instead, create the scene with HTML objects colored and reshaped by CSS. The very first HTML element I created was the cube.
I do realize now that I could have achieved a similar outcome using a SVG image, but this was long before I knew of such things.
Quick Facts:
- The animation lasts 25 seconds, and loops perfectly
- 2,249 lines of HTML and CSS script bring this to life
- 1,814 total lines of CSS make up this animation
- 605 of 1,814 is animation properties
- 92 different CSS style definitions
- 15 different animations exist
- 420 lines of HTML in the body
- 9 image files help support this scene
- And I am still refining this project in my spare time
Some In-Progress Screenshots
Future Plans:
A future idea I'm playing with is having Bendy (the clip-art person in black) walk in from the bottom of the scene from off screen, press the button (as he currently does), then walk over to the open door and exit, then repeat.