The same techniques could be used to make a browser game, to tell a story using moving characters, or to simply show a user how to navigate a website. Scrolling could be done up or down, in this case I started at the bottom and have the space ship launching up into outer space.
You can see it in action in the video below:
Or visit the site in your browser. (Should work in most modern browsers)
I wanted to give Bootstrap a try and I wanted to give CSS animations a try so I decided to make a new splash page for my MikeCooke.org URL.
This is the result:
Everything on the page except for my circle image was created via css.
Icons created using Font Awesome. They really need a Behance icon 🙂
Animations might be a bit much, but it only happens on load. Animations thanks to the examples by Justin Aguilar
Circles change background color and border on hover.
Should be working in most modern browsers, sorry older IE users.
I recently updated the site for The Sammo Project. I removed the sidebar to expand the photos to go across the whole page, tweaked the fonts and made a new logo. IE 8 or below will see some different fonts. IE 7 may see some different formatting.
Click here to see the old version.
I was thinking about redesigning my site for The Sammo Project for the new year and realized I never shared the 2012 version so here it is. The Sammo Project is a photo blog I setup to share pictures and videos of my daughter Samantha with family members who may not get to see her as often as they like.
More recent than the last one, but also no longer being used, this was another front splash page for my family blog. Clicking on one side took you to my family blog, clicking on the other side took you to our flickr picture page.
This was the first splash page I made for my family blog. It was a simple split image page, clicking on one side took you to my blog, clicking on the other side took you to my wife’s blog.