Recently I've been re-watching the US version of The Office. One of my favorite scenes is from the opening of the Launch Party episode. Michael is leading a meeting in the conference room while all the workers are transfixed by the DVD Video logo screen saver that is playing on the screen behind him.

Having worked in an office where work is so numbing that you cling to anything a tiny bit engaging for stimulation, I identity closely with the characters in the scene. While watching I also thought recreating the screen saver would be a great first project for me to tackle for my new site. I've never worked much with CSS animations before but this seemed like a good introduction. I am suprised how easy it was to work with and that is something that I don't normally say about CSS. I did get something close to what I wanted. I had some issues with trying to plot out the path of the logo. It might of helped to throw it in a container div with a set height and width, but this would limit responsivity. Like an actual DVD menu screen saver I want it to scale to the size of the screen. Using vh/vm might make things easier.

Using CSS animation is pretty cool but I know there is no way to get the logo to travel random path without using Javascript. Also getting the div to change color only when it comes into contact with the edge of the viewport. I doubt this is possible with just CSS but even if it is, it's probably way more work than I want to do. Project #2 will be adding Javascript to make both of these happen.


631 2 3