Project 1 / Project One: 6 Animated UI Components

For project one, I wanted to explore using 6 different interactive components used in common web design and attempt to apply them myself. I created a made up personal site that could very well be the homepage of a portfolio site or for a community. I added a "spinner" that changes direction when putting your mouse on top of it, an interactive menu, button, text table, a pop-out image, and a pop-out text bubble when the mouse is hovering on it.

Project 2 / Musicians Corner Animated Banner

For my second project I decided to create an animated banner promoting a project I help with in Nashville, TN called Musicians Corner. The banner features several photos from our live events along with text overlaid. The heading is masked, allowing for a gradient to show through, which moves side to side. The subtext animates by revealing the first line, then replacing letters that aren't used in the next line.

Project 3 / Another Neighborly Christmas Generative Animation

In this third project, we were asked to create a generative design, taking specific code and causing it to animate something. For my project, I took a recent album design I did and decided to manipulate certain elements of it. Using "Raphael" code, I created a path animation on the star flare. The flare swells and turns, then repeats. I also, with the use of CSS, created a hover animation on a set of trees in the background of the design. When the cursor is hovered over the trees, they will disappear.

Final Project / Interactive II Final Project - Musicians Corner 2012 Season Report

For my final project in the class I chose to create a season resort for a project I help run back home called Musicians Corner. I developed the report in the form of a parallax website. The site highlights the many accomplishments during the year, showcasing photos from the shows in the background and also in a slider. Text is overlaid on top of the images and move at different rates to add dimensionality to the site. The type was set through various CSS tricks to feel more editorial. At the end of the site, the logo is a sprite that changes color when hovered and links to the main website.